前期有个 是使用二进制流下载文件的示例;而在这篇文章的方法一中,是要将接口返回的结果 转成二进制流;
方法一
请求体头部设置:responseType: 'arraybuffer'
// 导出报告
handleExport(item) {
this.$api.bizApi.qualityAssessment.downloadPdf({reportId: item.reportId}).then((res) => {
this.download(item.reportName + '.pdf', res)
})
},
download(fileName, content) {
const url = window.URL.createObjectURL(new Blob([content], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', fileName) // 下载文件的名称及文件类型后缀
document.body.appendChild(link)
link.click()
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(url); // 释放掉blob对象
},
方法二
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
fileDownload(url, filename) {
let self = this;
let newFileName = "";
let fileArr = url.split(".");
let fileType = fileArr[fileArr.length - 1];
if (filename) {
newFileName = filename;
} else {
newFileName = "未命名." + fileType;
}
self.getBlob(url, function (blob) {
self.saveAs(blob, newFileName);
})
},
getBlob(url, cb) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
cb(xhr.response);
}
};
xhr.send();
},
saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
let link = document.createElement('a');
let body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
},