下载文件的三种具体实现方式

一，window.open()

1.可以使用window.open()直接完成文件的下载

二，使用a标签的download属性

1.代码

    var link = document.createElement("a");
    link.download ='xxx' //下载文件名称
    link.href ='xxx' // 下载地址
    link.style.display ="none"
    link.click() 

2.当请求返回的是二进制文件blob时，也可以使用a标志的方式下载文件。

let blob = new Blob([data],{type:''})
let link = document.createElement('a')[;
link.download = 'fileName';
link.href = URL.createObjectURL(blob); //生成指向blob文件的地址：blob:http://xxx
link.click() 

三，使用form表单下载文件

const post = (url, params) => {
    // 创建form元素
    var temp_form = document.createElement("form");
    // 设置form属性
    temp_form.action = url;
    temp_form.target = "_self";
    temp_form.method = "post";
    temp_form.style.display = "none";
    // 处理需要传递的参数 
    for (var x in params) {
        var opt = document.createElement("textarea");
        opt.name = x;
        opt.value = params[x];
        temp_form.appendChild(opt);
    }
    document.body.appendChild(temp_form);
    // 提交表单      
    temp_form.submit();
}

四，注意事项

1.使用a标签，和form表单实测下来不能同时完成多个文件的下载，例如直接用一个for循环来下载多个文件。有两种方法可以解决

（1）使用定时器间隔开来，不要让文件同时下载，实测可行

  for (let i = 0; i < activeItems.length; i++) {
      setTimeout(() => {
       let a = document.createElement("a");
       a.href = activeItems[i].downloadUrl;
       a.download = "111";
       a.click();
     }, 1000 * i); //每个文件隔1s下载
  }

（2）更可靠的方法是使用fetch将文件转为blob下载

function downloadIamge(imgSrc: string, fileName: string) {
  let imgUrl = imgSrc;
  let a = document.createElement("a");
  fetch(imgUrl)
    .then((res) => res.blob())
    .then((blob) => {
      a.href = URL.createObjectURL(blob);
      a.download = fileName;
      a.style.display = "none";
      a.click();
      window.URL.revokeObjectURL(a.href);
    });
}

for (let i = 0; i < activeItems.length; i++) {
  downloadIamge(activeItems[i].downloadUrl, activeItems[i].resourceId);
}

2，第一和第二种方式都是通过url上传递参数，在长度上有限制，所以能传递的参数有限。而form表单的文件下载方式没有参数的限制。