base64格式文件下载方法
下载图片时,接口返回的地址是base64格式的文件数据,因为页面需要把base64格式的数据转换为文件,再进行下载:

解决方案:
下载按钮:
<el-button type="default" class="btnfoot" @click="downloadFun">下载</el-button>
下载事件:
以下方法:downloadFile、base64ToBlob可以直接使用。
其中,multipleSelection表示所勾选的下载数据列表信息
downloadFun() {
console.log(this.multipleSelection);
for (let i = 0; i < this.multipleSelection.length; i++) {
const param = {
Command: 'downloadfile',
FileName: this.multipleSelection[i].FileName
}
videoImgDownload(param).then(response => {
console.log('videoImgDownload');
console.log(response);
if (response.StateCode == '200') {
this.base64Src = response.FileData;
this.downloadFile(response.FileName, this.base64Src);
} else {
this.$notify({title: '异常', message: response.message, type: 'warning', duration: 0});
}
});
}
},
downloadFile(fileName, content) {
const blob = this.base64ToBlob(content); // new Blob([content]);
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
//此写法兼容可火狐浏览器
document.body.appendChild(link);
const evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
}
},
base64ToBlob(code) {
const parts = code.split(';base64,');
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
},
浙公网安备 33010602011771号