javascript使用Blob对象实现的下载文件操作示例


Posted in Javascript onApril 18, 2020

本文实例讲述了javascript使用Blob对象实现的下载文件操作。分享给大家供大家参考,具体如下:

Blob对象

  • 前言
  • 环境
  • 操作
  • 总结

Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件。

前言

最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏览器下载excel。

环境

  1. vue2.x
  2. webpack3.x
  3. axios

操作

import axios from 'axios'
/**
* 从服务器下载excel
*/
function downloadExcel (settings) {
 const defaultOptions = {
  responseType: 'arraybuffer'
 }
 Object.assign(settings.options, defaultOptions)
 requestToResponse(settings).then(res => {
  const filename = decodeURI(res.headers['content-disposition'].split('filename=')[1])
  if ('download' in document.createElement('a')) {
   downloadFile(res.data, filename)
  } else {
   Message.error('浏览器不支持')
  }
 })
}
/**
* 发送http请求
* @param {Object} settings api参数
* @returns reponse
*/
function requestToResponse (settings) {
  const defaultParams = {
  timeout: 45000,
  headers: {
   'X-Requested-With': 'XMLHttpRequest',
   'Content-Type': 'application/json'
  },
  responseType: 'json',
  method: 'POST'
 }
 Object.assign(defaultParams, settings)
  return new Promise((resolve, reject) => {
  axios(defaultParams).then(res => {
   resolve(res)
  }).catch(err => {
   reject(err)
  })
 })
}
/**
* blob下载(兼容IE)
* @param {String} content 文件内容
* @param {String} filename 文件名
*/
function downloadFile (content, filename) {
 const blob = new Blob([content])
 // IE
 if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveOrOpenBlob(blob, filename)
 } else {
  imatateDownloadByA(window.URL.createObjectURL(blob), filename)
 }
}
/**
* 通过a标签模拟下载
* @param {String} href
* @param {String} filename
*/
function imatateDownloadByA (href, filename) {
 const a = document.createElement('a')
 a.download = filename
 a.style.display = 'none'
 a.href = href
 document.body.appendChild(a)
 a.click()
 a.remove()
 window.URL.revokeObjectURL(href)
}

// 下载excel
downloadExcel({
  url: '/default/excel/export',
  responseType: 'arraybuffer'
})

responseType设置为arraybuffer
javascript使用Blob对象实现的下载文件操作示例
responseTyp设置成blob
javascript使用Blob对象实现的下载文件操作示例
不设置responseType,出现乱码
javascript使用Blob对象实现的下载文件操作示例
若引入mockjs,其拦截响应,重置了responseType,会出现乱码
javascript使用Blob对象实现的下载文件操作示例

总结

  1. 此下载excel只适用于post请求,get请求交给浏览器自行解析处理
  2. responseType必须设置成arraybuffer或blob
  3. 下载excel时务必关闭mockjs之类的拦截响应的服务

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
vue实现百度搜索功能
Dec 28 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 #Javascript
es6函数name属性功能与用法实例分析
Apr 18 #Javascript
es6数组includes()用法实例分析
Apr 18 #Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 #Javascript
es6函数中的作用域实例分析
Apr 18 #Javascript
es6函数之rest参数用法实例分析
Apr 18 #Javascript
vue实现短信验证码输入框
Apr 17 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
第三节--定义一个类
2006/11/16 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php上传图片类及用法示例
2016/05/11 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python中动态创建类实例的方法
2017/03/24 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python isinstance函数用法详解
2020/02/13 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
简述数据库的设计过程
2015/06/22 面试题
网络优化专员求职信
2014/05/04 职场文书
纪委立案决定书
2015/06/24 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers