js实现文件流下载和URL下载

下载首先想到的就是a标签的download的属性,download是html5新出现的属性

      <a href="/images/mimage.jpg" download="下载">
      //href 是指向下载的超链接
      //download 对应的是下载的文件名

download支持的浏览器及版本

download仅支持同源策略,如果非同源的话,download会失效 且直接跳转到相对应href的界面。

如果是非同源 使用以下方法:

   let url ="https://baidu.com";
   let name ="百度";
   const downloadRes = async () => {
      let response = await fetch(url); // 内容转变成blob地址
      let blob = await response.blob();  // 创建隐藏的可下载链接
      let objectUrl = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = objectUrl;
      a.download = name;
      a.click()
      a.remove(); 
   }
  downloadRes();

如果是文件流形式的 使用以下方法:

   //首先请求接口 返回的数据为res
   if (window.navigator.msSaveOrOpenBlob) {
       // 兼容ie11
        var blobObject = new Blob([res.result]);
        window.navigator.msSaveOrOpenBlob(blobObject, name);
   } else {
       let url = URL.createObjectURL(new Blob([res]));
       let a = document.createElement("a");
       document.body.appendChild(a);
       a.href = url;
       a.download = name;
       a.target = "_blank";
       a.click();
       a.remove();
  }

附带一个关于其他小伙伴写的关于下载的链接:https://blog.csdn.net/qq_43471802/article/details/103436595

原文地址:https://www.cnblogs.com/cntt/p/13564035.html