vue 带token下载文件流,且不乱码
import { fileDownloadList, fileDownload } from "@/api/file/download";
fileDownload(row.fileId).then(
response => {
console.log(response)
const filename = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1]);
let blob = new Blob([response.data],{
type: response.headers['content-type']
});
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)
}
).catch(err => {
console.log(err);
});
终于下载下来了,但是万万没想到啊,除了txt格式的打开的内容是正常的,其他格式如docx打开的却是乱码。
使用如下方法可以解决文件内容乱码问题:
let baseURL = process.env.VUE_APP_BASE_API;
function createObjectURL(object) {
return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}
let xhr = new XMLHttpRequest()
let url = baseURL + '/system/file/download/' + row.fileId;
xhr.open('get', url)
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
xhr.setRequestHeader('Authorization', 'Bearer ' + getToken())
xhr.responseType = 'blob'
var formData = new FormData();
xhr.onreadystatechange = function() {
if (xhr.readyStatQAe === 4 && xhr.status === 200) {
const blob = new Blob([xhr.response])
let url = window.URL.createObjectURL(blob)
//创建一个a标签元素,设置下载属性,点击下载,最后移除该元素
let link = document.createElement('a')
link.href = url
link.style.display = 'none'
//取出下载文件名
const fileName = decodeURI(xhr.getResponseHeader('content-disposition').split(';')[1].split('=')[1]);
link.setAttribute('download', fileName)
link.click()
window.URL.revokeObjectURL(url)
}
}
xhr.send(formData);
参考