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 }); },