我们在下载文件的时候,后端同学给我们的一般是二进制的文件。
如果按照普通的请求方式处理,前端也没办法直接下载。
首先,下载获取到二进制流了以后,应该把二进制流转换成Blob类型,然后IE浏览器使用模拟点击的方式去下载,非IE浏览器可以使用navigator浏览器对象的方法来下载文件
const content = res // res为获取到的二进制文件
const blob = new Blob([content],{type: 'application/x-xls'})
const fileName = '模板.xls'
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
这里我模拟的是一个excel表格下载。但是下载下来以后,我发现文件是损坏的,打不开。在排除了是后端同学给的文件问题后,又回到了下载这里请求出的问题。
后来发现,是服务器返回信息的时候,需要告诉浏览器指定的responseType类型。
responseType类型有几种text,json,buffer,blob。其中后两种都是文件格式,如果不指定的话,一般默认的是text格式。
在向服务器发送请求的时候,我们给请求带上responseType:blob。然后下载下来的文件就不会出问题了。
function createAPI(baseURL = BaseUrl) {
return function (conf) {
conf = conf || {}
return instance({
responseType: conf.responseType||'', // 这里是重点,指定类型
url: conf.url,
baseURL: baseURL,
method: conf.method,
headers:conf.headers||{},
...conf.opts
})
}
}
以上是封装过后的API类型,自己根据自己封装的方法就可以使用了
评论 (0)