目前a標簽下載文件已經(jīng)成為主流妆偏，并且用戶體驗較好膨蛮，因此本人沒有對其他下載方式深入研究過海洼。
1.同源url
同源且下載地址就是一個文件時拧揽，直接設(shè)置a標簽的href屬性為下載地址慰照，并且為a標簽添加download屬性即可灶挟。如果非同源url，那么這種方式會直接將文件在新的頁面打開毒租，而非下載稚铣。
2.非同源url
這里介紹三種發(fā)送請求的方式和一種不發(fā)送請求的方式。以下4種方式都不會打開文件而是直接下載墅垮，由于是發(fā)送網(wǎng)絡(luò)請求惕医，因此需要在服務(wù)端解決跨域問題才能使用這種方式。以下請求都以axios為例：
2.1利用Blob對象（推薦）
//url是下載地址,fileName是下載時的文件名
function downloadFileBlob(url,fileName){
axios.get(url, {responseType: 'blob'}).then(res=>{
console.log(res);
let url=URL.createObjectURL(res.data);
console.log(url);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
//download屬性可以設(shè)置下載到本地時的文件名稱,經(jīng)測試并不需要加文件后綴
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
//釋放內(nèi)存
URL.revokeObjectURL(url);
})
}
打印結(jié)果：
QQ截圖20230525163134.png
2.2利用base64
適用于很小的文件
//url是下載地址,fileName是下載時的文件名
function downloadFile(url,fileName){
axios.get(url, {responseType: 'blob'}).then(res=>{
console.log(res);
const a = document.createElement('a');
a.style.display = 'none';
a.href = URL.createObjectURL(res.data);
//download屬性可以設(shè)置下載到本地時的文件名稱,經(jīng)測試并不需要加文件后綴
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
})
}
打印結(jié)果：
QQ截圖20230525162951.png
2.3利用arraybuffer（不推薦）
其實也是轉(zhuǎn)為base64算色，只是更麻煩一些抬伺，需要根據(jù)響應(yīng)頭的content-type屬性手動拼接base64字符串。而且btoa也是一個過時的api灾梦，因此不推薦使用
function downloadArraybuffer(url,fileName){
axios.get(url, {responseType: 'arraybuffer'}).then(res=>{
console.log(res);
let href='data:'+res.headers['content-type']+';base64,'+window.btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
console.log(href);
const a = document.createElement('a');
a.style.display = 'none';
a.href = href;
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
})
}
打印結(jié)果：
QQ截圖20230525164749.png
2.4特殊情況峡钓，返回的數(shù)據(jù)type為application/octet-stream
QQ截圖20230525181259.png
這種情況下，直接使用a標簽并在url后拼接'?response-content-type=application/octet-stream'字符串就能實現(xiàn)下載若河。文件名無法修改能岩，content-disposition字段中下發(fā)的filename就是文件名。使用2.123的三種方式下載的文件沒有后綴萧福。
function downloadFile(url,fileName){
const a = document.createElement('a');
a.style.display = 'none';
a.href = url+'?response-content-type=application/octet-stream';
a.download='';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
以上就是我對前端文件下載的總結(jié)拉鹃，可能理解不是很深刻，如有錯誤歡迎指正
參考文獻：
https://blog.csdn.net/love_aya/article/details/115211470
https://blog.csdn.net/weixin_46801282/article/details/123386264
