1.接口请求:
let params = {
id: 1,
name: '李四'
}
this.$axios.post('/xxxx', params, { responseType: 'blob' }).then(res => {
if (res.data) {
this.fileDownLoad(res.data, 'text.xlsx')
}
}).catch(() => {
this.$message.error('下载失败')
})
注意:responseType:’blob’要加上,这样就会返回Blob对象,不然就会出现下载的xlsx在试图打开文件时遇到错误的问题。
responseType:设置该值能够改变响应类型,就是告诉服务器你期望的响应格式。
值 | DOMString (这个是默认类型) |
---|---|
’ ’ | DOMString (这个是默认类型) |
arraybuffer | ArrayBuffer对象 |
blob | Blob对象 |
document | Document对象 |
json | JavaScript object, parsed from a JSON string returned by the server |
text | DOMString |
ps:不知道为什么我使用responseType: 'arraybuffer’也可以下载正确的格式,但是同一个接口同事要使用’blob’才可以。
2.blob转换URL方法:
fileDownLoad (data, name) {
// 判断浏览器是否支持blob对象
try {
// 该实例化的方式第一个参数必须是数组的格式
var blob = new Blob([data], { type: name })
} catch (e) {
// 旧版本浏览器下的blob创建对象
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder
if (e.name === 'TypeError' && window.BlobBuilder) {
var blobbuilder = new BlobBuilder()
BlobBuilder.append(data)
var blob = blobbuilder.getBlob("application/zip")
} else {
alert('浏览器版本较低,暂不支持该文件类型下载')
}
}
if (!!window.ActiveXObject || 'ActiveXObject' in window) { //判断了有该方法即为IE浏览器
try {
window.navigator.msSaveBlob(blob, name)
} catch (e) {
console.log(e);
}
} else {
var url = window.URL.createObjectURL(blob)
var linkElement = document.createElement('a') // 创建点击下载的元素
linkElement.setAttribute('href', url)
linkElement.setAttribute('downLoad', name)
linkElement.click()
}
},