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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM