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 基础学习笔记
May 29 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 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下统计用户在线时间的一种尝试
2010/08/26 PHP
组合算法的PHP解答方法
2012/02/04 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python给你的头像加上圣诞帽
2018/01/04 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python3的pip路径在哪
2020/06/23 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
python re模块常见用法例举
2021/03/01 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
造型师求职自荐信
2013/09/27 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL