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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
字符串反转_JavaScript
Apr 28 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
vue按需加载实例详解
Sep 06 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 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执行sql语句的写法
2009/03/10 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
xml转json的js代码
2012/08/28 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
django自带调试服务器的使用详解
2019/08/29 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
区域总监的岗位职责
2013/11/21 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
学校施工安全责任书
2015/01/29 职场文书
共青团员自我评价
2015/03/10 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android