base64格式檔案下載方法
阿新 • • 發佈:2018-11-23
下載圖片時,介面返回的地址是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 }); },