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 相关文章推荐
jquery中输入验证中一个不错的效果
Aug 21 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 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 Session会话超时时间设置方法
2014/06/10 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中去空格函数的用法
2014/08/21 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python实现顺序表的简单代码
2018/09/28 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python中操作文件的模块的方法总结
2021/02/04 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
Java面试题及答案
2012/09/08 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
公务员保密承诺书
2014/03/27 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS