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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 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
php正则校验用户名介绍
2008/07/19 PHP
跟我学Laravel之路由
2014/10/15 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python梯度下降法的简单示例
2018/08/31 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python 标准差计算的实现(std)
2019/07/29 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python实现扫雷游戏
2020/03/03 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
正风肃纪剖析材料
2014/09/30 职场文书
论文评审意见
2015/06/05 职场文书
培训感想范文
2015/08/07 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
pytorch 使用半精度模型部署的操作
2021/05/24 Python