1. 程式人生 > 實用技巧 >[轉]檔案下載方式

[轉]檔案下載方式

原文:https://www.cnblogs.com/boreguo/p/10282007.html

----------------------------------------------------------

1、HTML5新特性

 <ahref="要下載檔案的路徑"download="要下載檔案的名稱"></a>

2、下載方法

window.open('檔案路徑');

 或 window.location.href = '檔案路徑';

(開啟新頁面造成頁面一閃一閃的)

問題:以上兩種方式在批量下載時迴圈不可用,在迴圈中只執行迴圈的最後一次操作(當然,如果單次下載,點選速度過快也會僅下載最後一次點選的檔案)。

解決:使用iframe下載

3、下載方法

download(item, url) {   const iframe = document.createElement("iframe");   iframe.style.display = "none"; // 防止影響頁面   iframe.style.height = '0px'; // 防止影響頁面   iframe.src = url+'?downloadUrl='+item.fileUrl+'&fileName='+item.fileName;   document.body.appendChild(iframe); // 這一行必須,iframe掛在到dom樹上才會發請求   // 5分鐘之後刪除(onload方法對於下載連結不起作用)   setTimeout(()=>{     iframe.remove();   }, 5 * 60 * 1000); } ------------------------------------------------------------------------------------------------- this.selectFiles.forEach(it => {   that.download(it, url); })

4、解決檔名為中文下載出現_____.doc的問題(angular中)

download() {
let url = `路徑`;
this.http.request('GET',url,{
responseType: "arraybuffer"
}).subscribe((val:any)=>{
let blob = new Blob([val], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
let objectUrl = URL.createObjectURL(blob);
let filename = '檔名';
let aDownload = $("<a><span class='downloadFile'></span></a>").attr("href",objectUrl).attr('download',filename);
$("body").append(aDownload);
$(".downloadFile").click();
aDownload.remove();
});
}