1、背景
通常有一些后端框架为了安全或其他目的并不支持文件下载，服务器也不向外暴露直接访问文件的地址。所以只能返回文件流数据前端自行处理流数据并下载。
2、base64
base64是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。
3、blob
blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
4、base64转blob
b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512
let byteCharaters = atob(b64Data)
let byteArrays = []
for (let i = 0; i < byteCharaters.length; i += sliceSize) {
let slice = byteCharaters.slice(i, i + sliceSize)
let byteNumbers = new Array(slice.length)
for (let j = 0; j < slice.length; j++) {
byteNumbers[j] = slice.charCodeAt(j)
}
let byteArray = new Uint8Array(byteNumbers)
byteArrays.push(byteArray)
}
let blob = new Blob(byteArrays, { type : contentType})
return blob
}
5、拿到后台返回的流数据转文件并下载
downloadExcel(item) {
let that = this
let name = '下载内容' + new Date()
new this.$VService.DataService({
url: that.$VConfig.inters.iQuery.getExportFile,
data: {
exportId: item.export_id
},
success: function(d) {
if (!d.data) {
return
}
let fileName = name + '.' + 'xls'
let blob = that.b64toBlob(d.data, 'application/vnd.vnd.ms-excel')
if (navigator.msSaveBlob) { // 该方法兼容ie10，允许用户在客户端上保存文件，方法如同从 Internet 下载文件
navigator.msSaveOrOpenBlob(blob, fileName)
} else { // 创建一个a标签，触发下载点击事件
let btnDownload = document.getElementById('btnDownload')
btnDownload.download = fileName
btnDownload.href = URL.createObjectURL(blob)
btnDownload.click()
}
}
}).request()
},
6、contentType与文件对应表
.doc
application/msword
.dot
application/msword
.docx
application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx
application/vnd.openxmlformats-officedocument.wordprocessingml.template
.docm
application/vnd.ms-word.document.macroEnabled.12
.dotm
application/vnd.ms-word.template.macroEnabled.12
.xls
application/vnd.ms-excel
.xlt
application/vnd.ms-excel
.xla
application/vnd.ms-excel
.xlsx
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltx
application/vnd.openxmlformats-officedocument.spreadsheetml.template
.xlsm
application/vnd.ms-excel.sheet.macroEnabled.12
.xltm
application/vnd.ms-excel.template.macroEnabled.12
.xlam
application/vnd.ms-excel.addin.macroEnabled.12
.xlsb
application/vnd.ms-excel.sheet.binary.macroEnabled.12
.ppt
application/vnd.ms-powerpoint
.pot
application/vnd.ms-powerpoint
.pps
application/vnd.ms-powerpoint
.ppa
application/vnd.ms-powerpoint
.pptx
application/vnd.openxmlformats-officedocument.presentationml.presentation
.potx
application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx
application/vnd.openxmlformats-officedocument.presentationml.slideshow
.ppam
application/vnd.ms-powerpoint.addin.macroEnabled.12
.pptm
application/vnd.ms-powerpoint.presentation.macroEnabled.12
.potm
application/vnd.ms-powerpoint.template.macroEnabled.12
.ppsm
application/vnd.ms-powerpoint.slideshow.macroEnabled.12
7、post请求二进制返回数据
// post请求二进制返回数据时，需要设置请求头responseType为arraybuffer
responseType: arraybuffer
{
let blob = new Blob(d.data, 'application/vnd.vnd.ms-excel')
}
// 这样就可以得到blob数据完成下载
