[轉]檔案下載方式
阿新 • • 發佈:2020-07-09
原文: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();
});
}