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

参考文章:https://www.cnblogs.com/cntt/p/13564035.html

download属性

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

下载

blob方法

  let url ="url";
   let name ="百度.docx";
   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();

先把地址变成blob地址,然后创建隐藏的可下载链接,将response中的原始数据的类文件对象(response.blob)作为连接放在隐藏连接下,然后在模拟click事件,最后移除出去,这样就可以用跨域的方式获得一个制定命名的文件。
如果是文件流形式的 使用以下方法:

//首先请求接口 返回的数据为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();
  }

你可能感兴趣的:(js实现文件流下载和URL下载)