1、a鏈接(修改失敗,存在跨域)
<el-table-columnalign='right'label="下載地址"width="200"><template slot-scope="{row}"><a :href="row.dataUrl" download="文件名">下載</a></template></el-table-column>
2、后端返回二進制文件前端下載
<el-table-columnalign='right'label="操作"width=""><template slot-scope="{row}"><el-button size="mini" type="primary" @click="downLoadInvoice(row)">下載</el-button></template></el-table-column>
import download from "@/api/download";async downLoadInvoice(row){download.exportPDF('/api/charge-settlement/download-invoice', {businessCode:row.businessCode,dataUrl:row.dataUrl,name:row.downloadInvoiceName}, `${row.downloadInvoiceName}.pdf`);
}
?
exportPDF(url, data, fileName) {axios({method: "post",baseURL: ROOT,withCredentials: true,responseType: "blob",timeout: 500000,url: url,headers: {'Access-Control-Allow-Origin': '*','Content-Type': 'application/json',token: store.getters.token ? getToken() : null,},data: data}).then(response => {const blob = new Blob([response.data], { type: "application/vnd.ms-excel" });let file_name = fileName || this.getDateTime() + ".pdf";const linkNode = document.createElement('a');//ie瀏覽器下載if (!!window.ActiveXObject || "ActiveXObject" in window || navigator.userAgent.indexOf("Edge") > -1) {navigator.msSaveBlob(blob, fileName);} else {linkNode.download = file_name; //a標簽的download屬性規定下載文件的名稱linkNode.style.display = 'none';linkNode.href = URL.createObjectURL(blob); //生成一個Blob URLdocument.body.appendChild(linkNode);linkNode.click(); //模擬在按鈕上的一次鼠標單擊URL.revokeObjectURL(linkNode.href); // 釋放URL 對象document.body.removeChild(linkNode);}}).catch(function(error) {console.log(error);});},