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如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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手册及PHP编程标准
2006/12/17 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python返回数组的索引实例
2019/11/28 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
保护环境建议书
2014/03/12 职场文书
环保倡议书300字
2014/05/15 职场文书
欢迎家长标语
2014/10/08 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
初中政治教师教学反思
2016/02/23 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python