直接上vue的代码:
let sendData = {}
let successCallBack = (resp) => {
if (resp.status !== 200) {
this.$message.error('文件下载失败')
return false
}
// ********************* 接收文件流 ***********************
let blob = new Blob([resp.data], {
// type mimi类型 可以百度详细类型
// word文档为msword,application/pdfpdf文档为pdf application/vnd.ms-excel
// image/jpeg jpg
// type: `msword`
type: `application/msword` // 'application/octet-stream' 代表所有扩展名,这里也可以不指定 type
})
let objectUrl = URL.createObjectURL(blob)
let link = document.createElement('a')
// 这里需要注意:
// 取出来的fName可能带引号,如 "xxx.png", 这种情况需要再处理一下:fName.slice(1, -1)
let fName = decodeURI(resp.headers['content-disposition'].split('=')[1])
link.href = objectUrl
link.setAttribute('download', fName)
document.body.appendChild(link)
link.click()
// 下载完成移除元素
document.body.removeChild(link)
// 释放掉blob对象
window.URL.revokeObjectURL(objectUrl)
}
// this.$request.xxx() 是因为我将axios重新进行了封装
this.$Request.getFiles({
data: sendData,
responseType: 'blob', // **********这里的响应类型必须设置为'blob'
success: successCallBack,
requestDataType: 'form-data'
})
}
更详细的请参考:https://blog.csdn.net/CarryBest/article/details/102586653