一般來說前端實現的思路就是通過動態創建a標簽，設置其download屬性，最后刪除a就好了，對于不是圖片的文件一般都可以下載，但是如果是圖片，有些瀏覽器會自動打開圖片，所以我們需要手動把它轉化為data:URLs或blob:URLs，基于這個原理，我們可以用fileReader，也可以用fetch-URL.createObjectURL，這里經過大量測試我采用后
<a href="/static/xxxxx.csv" download="fileName">絕對路徑寫法2.配合后端來寫原理簡單就是后端返回 url download寫上文件名
filename 直接a標簽下載就行了
function
download(url, filename) {
eturn fetch(url).then(res => res.blob().then(blob => {
//創建a標簽
let a = document.createElement('a');
//處理后端url
let url = window.URL.createObjectURL(blob);
//給a標簽賦值
a.href = url;
a.download = filename;
a.click();
// 釋放blob對象
window.URL.revokeObjectURL(url);
}))
}
自己寫的代碼，頁面寫一個點擊事件，拿到相對應的值就可以了
//html頁面
<template slot-scope="datarow">
<el-button type="text" @click="downloadExcel(datarow.row.url,datarow.row.fileName)">下載</el-button>
</template>
// 下載文件
downloadExcel(url, fileName) {
// console.log(url,fileName,)
let param = {
fileName: fileName
};
apiDownLoad(url, param).then(res => {
var blob = new Blob([res], { type: "application/octet-stream" });
if (window.navigator.msSaveOrOpenBlob) {
//msSaveOrOpenBlob方法返回bool值
navigator.msSaveBlob(blob, fileName); //本地保存
} else {
var link = document.createElement("a"); //a標簽下載
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
}
});
},
