参考了一些资料,这里主要是对一些内容作出解释
下载方式基本上都是一样的,代码如下:
if ('msSaveOrOpenBlob' in navigator) {
// IE 中下载文件的方法 msSaveBlob 和 msSaveOrOpenBlob
// msSaveBlob 提供保存按钮
// msSaveOrOpenBlob 提供保存按钮和打开按钮
window.navigator.msSaveOrOpenBlob(
new Blob([response.data], { type: response.headers['content-type'] }),
fileName
)
} else {
let url = window.URL.createObjectURL(
new Blob([response.data], { type: response.headers['content-type'] })
)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link);
}
这里解释几个概念
1
URL.createObjectURL()
静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
objectURL = URL.createObjectURL(object);
object
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
2
Blob
对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
要从其他非blob对象和数据构造一个 Blob,请使用 Blob() 构造函数
Blob(blobParts[, options])
返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
如何读取blob,方式有三种
一,使用FileReader
var reader = new FileReader();
reader.readAsText(blob);
reader.addEventListener("loadend", function() {
console.log(this)
});
二,使用Response对象
var text = await (new Response(blob)).text();
三,使用blob自带的方法
注意上面第三种返回值与前两种不一样。
3
FileReader
对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
open方式也可以实现部分文件类型的下载
该方法因为打开一个新窗口,如果url是图片的话会是预览的效果,如果是其他文件比如xlsx文件,会是下载的效果,但是毕竟是一个新窗口,所以会有闪动的效果。
window.open('http://xxx.xlsx')
后端返回文件名字解析
let headerName = res.headers['content-disposition']
transFileName (headerName) {
if (!headerName) return {}
let name = headerName.split('filename=')[1]
let fileName = decodeURI(name.split('.')[0])
let ext = name.split('.')[1]
return fileName + '.' + ext
}
请求时要注意一定要修改返回的响应类型
responseType:'json',//default
return request({
url: '/export',
method: 'post',
responseType: 'blob',
data
})