api接口请求中添加responseType: 'arraybuffer',
export function exportData(data) {
return request({
url: '/crawler/taskmanagement/exportexcel',
responseType: 'arraybuffer',
method: 'post',
data
})
}
接受后端穿过来的数据流方法一:
DownloadData(id) {
var that = this
exportData({id: id}).then(res => {
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
let objectUrl = URL.createObjectURL(blob);
window.location.href = objectUrl;
})
},
接受后端穿过来的数据流方法二(此方法可以指定下载表格的名称):
DownloadData(id) {
var that = this
exportData({id: id}).then(res => {
const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '分拣表.xlsx' // 获取后端返回存在请求头里边的表单名字
that.$options.methods.fileDownload(res.data, filename);
})
},
fileDownload(data, fileName) {
const blob = new Blob([data], {
type: 'application/octet-stream'
})
const filename = fileName || 'filename.xls'
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, filename)
} else {
var blobURL = window.URL.createObjectURL(blob)
var tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', filename)
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(blobURL)
}
},
后端使用ThinkPHP5,后端相关编码请查看https://blog.csdn.net/supramolecular/article/details/83303944