前端的三種下載方法

上傳和下載是前端er們常常遇到的場景，上傳還能夠用element、iview等各類封裝好的組件，下載則否則，經常須要寫不少的代碼，並且常常跟後端對接失敗，有時候真是內心mmp。好了，接下來分享一下本身常常使用的3種下載方式，有須要的同窗請自取，本身也至關於作個整理回顧。

1. window.open的方式

   此種方式最low，然而倒是最省事的，所以常常被某些愛省事的後端拿來就用。

   使用方式：window.open(url)，url既能夠是絕對路徑，也能夠是相對路徑。須要注意的是，拼接的連接必定要是合法的url，我在很長的一段時間裏不知道如何正確地拼接數組參數的url，實在是慚愧，直到後來瞭解到有encodeURIComponent這個神器…

   缺點：新打開頁面，影響交互體驗；直接下載，不能自定義文件名，文件存放位置

   //導出列表
     exportList(obj) {
       let link =
         window.globalConfig.defaultProxyPath +
         url +
         "/key/person/export?idNums=" +
         encodeURIComponent(JSON.stringify(obj));
       window.open(link);
     },
   複製代碼

2. 虛擬表單的方式

   表單的下載歷史可謂源遠流長，下文中的jq調用方式，原理沒變，一樣是生成虛擬表單，而後模擬提交事件，而後銷燬虛擬表單。可是都9102年了還用這種方式來下載，不可謂不low。

   缺點：過期

   //生成虛擬表單，而後手動觸發提交事件
   	downLoadFile(options) {
         //let $ = $.noConflict();
         let config = $.extend(
           true,
           {
             method: "post"
           },
           options
         );
         let tmpIframe = $('<iframe id="down-file-iframe" />');
         let tmpForm = $(
           '<form target="down-file-iframe" method=" ' + config.method + '" />'
         );
         tmpForm.attr("action", config.url);
         for (let key in config.data) {
           tmpForm.append(
             '<input type="hidden" name="' +
               key +
               '" value="' +
               config.data[key] +
               '" />'
           );
         }
         tmpIframe.append(tmpForm);
         $(document.body).append(tmpIframe);
         tmpForm[0].submit();
         tmpIframe.remove();
       }
   
   	//調用
   	 this.downLoadFile({
            url: predix + `/rs/namelist/blackreport`,
            data: param
        });
   
   複製代碼

3. 文件流式下載

   H5其實提供了不少很好用的api，流文件下載就是其中一種。在向後端發送請求時，咱們只須要將header中的content-type設置成咱們想要的格式，便能獲得想要的流文件，從而觸發瀏覽器的下載功能。

   優勢：簡潔，綠色，可自定義文件名和文件存放位置

   注意：此方法並非萬無一失，關於header的設置須要先後端對接清楚，在某些狀況下，好比跨域，headers的某些屬性將會受限，須要後端要較高的素養

   //發出請求
   	download(url, param) {
         let resType;
         if (window.navigator.msSaveOrOpenBlob) {
           // for IE
           resType = "arraybuffer";
         } else {
           resType = "blob";
         }
         return axios({
           url: url,
           method: "post",
           responseType: resType,
           headers: { Accept: "application/octet-stream" },
           data: param
         });
       },
   	//獲得文件
       real_download(obj) {
         this.download("/rs/experiment/graph/export", obj).then(res => {
           let blobObject = new Blob([res.data]);
           // 獲取文件名
           let disposition = res.headers["content-disposition"]
             ? res.headers["content-disposition"]
             : "";
           let filename = decodeURI(disposition.split("filename=")[1]);
           // let filename = row.fileName;
   
           if (window.navigator.msSaveOrOpenBlob) {
             // for IE
             window.navigator.msSaveOrOpenBlob(blobObject, filename);
           } else {
             const file = window.URL.createObjectURL(blobObject);
             const link = document.createElement("a");
             document.body.appendChild(link);
             link.setAttribute("download", filename);
             link.setAttribute("href", file);
             link.click();
             //URL對象釋放內存
             window.URL.revokeObjectURL(file);
             link.remove();
           }
         });
       },
   
   複製代碼

   總結：簡單說了下3種方式，主要仍是本身作個記錄，不愛查資料，全憑本身理解，錯漏之處還望你們海涵。

​