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 相关文章推荐
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
详解Angular2响应式表单
Jun 14 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
vue实现户籍管理系统
May 29 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
原生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
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Django中create和save方法的不同
2019/08/13 Python
基于python plotly交互式图表大全
2019/12/07 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python能做哪些生活有趣的事情
2020/09/09 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
挂职思想汇报
2013/12/31 职场文书
行政人事岗位职责
2014/03/17 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
个人自荐书范文
2015/03/09 职场文书
党员进社区活动总结
2015/05/07 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
python requests模块的使用示例
2021/04/07 Python
golang 实现Location跳转方式
2021/05/02 Golang
python pygame入门教程
2021/06/01 Python