下载图片时,接口返回的地址是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 => { this.base64Src = response.FileData; this.downloadFile(response.FileName, this.base64Src); }); } }, downloadFile(fileName, content) { const aLink = document.createElement('a'); const blob = this.base64ToBlob(content); // new Blob([content]); const evt = document.createEvent('HTMLEvents'); evt.initEvent('click', true, true);// initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); // aLink.dispatchEvent(evt); aLink.click() }, 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 }); },