前端下载功能

场景

阿里云OSS，在知道url地址的情况下，进行多文件下载，涉及的阿里云的相关aip就不在此讨论了

1.a标签

html5中的a标签添加了download属性，此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名
但此属性仅适用于同源URL。

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

2.iframe标签

iframe的src属性，支持文件地址，通过iframe进行文件的下载，添加到document中，下载才会生效
具体代码如下：

    const url=""  //下载的地址
    const iframe = document.createElement("iframe");
    iframe.style.display = "none"; 
    iframe.style.height = 0;
    iframe.src = url; 
    document.body.appendChild(iframe);

2.1 在发起下载前，可以先验证下url对应的资源是否存在

验证资源是否的存在的方法很多，例如：

export const isUrlExist = url => {
  return new Promise((resolve, reject) => {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.status === 404) {
        return resolve(404);
      }
      if (xmlhttp.status === 200) {
        xmlhttp.onreadystatechange = null;
        return resolve(200);
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  });
};

2.2 在下载功能实现的过程的Error

错误:
ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION
对于chrome浏览器 , 当文件下载时 , 若http头设置了 Content-Disposition , 则对于某些半角符号会报上述错误

解决：
对于filename参数的后续的值，若带有特殊符号的文件名，请用""进行包裹;
若不进行包裹，浏览器解析时，可能会因为部分特殊字符被误认为是HTTP 响应拆分攻击

参考：
http://codeverge.com/embarcadero.delphi.intraweb/chrome-err_response_headers_multi/1061174
https://blog.csdn.net/qq_37837134/article/details/84644097

3.如果下载的文件不是很大，也可以使用FileSaver

FileSaver 是基于blob进行下载的，下载大小也有显示

具体可以看github上的文档：
https://github.com/eligrey/FileSaver.js

参考资料:(掘金大佬写的下载通识)
https://juejin.im/post/5bd5547a6fb9a05cdd2d5109