文件下载方式

1、HTML5新特性

 <a href="要下载文件的路径"  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();
});
}
原文地址:https://www.cnblogs.com/boreguo/p/10282007.html