本文实例讲述了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

responseTyp设置成blob

不设置responseType，出现乱码

若引入mockjs，其拦截响应，重置了responseType，会出现乱码

总结

1. 此下载excel只适用于post请求，get请求交给浏览器自行解析处理

2. responseType必须设置成arraybuffer或blob

3. 下载excel时务必关闭mockjs之类的拦截响应的服务

希望本文所述对大家JavaScript程序设计有所帮助。

来源：https://blog.csdn.net/harmsworth2016/article/details/84395241