利用 post請求 下載文件

一 傳統的下載文件方式 - 通過get請求，模擬a標簽，利用瀏覽器下載特性

const downFile  = （ ）=> {
    const link = document.createElement('a');
    link.target = '_blank';
    link.href = URL + url;
    link.click();
}

缺點

不能進行header 請求頭的設置，比如有需求需要在header頭中攜帶 token信息
只能采用 qwery string parameters 進行傳值 - 類似 get請求url 后加 location.search的方式

二 利用iframe標簽進行下載

      const origin =  window.location.hostname === 'localhost'? 'http://10.251.9.202': window.location.origin;
      let element = document.getElementById('downloadiframe');
      if (!element) {
        element = document.createElement('iframe');
        element.id = 'downloadiframe';
        element.style.cssText = 'display:none;';
        document.body.appendChild(element);
      }
      element.src = `${origin}/v1/export_collection?ids=${selectkeys}&authorization=bearer ${t.token}`;

三 利用post請求

彌補了get傳值的缺點，但是需要對后端傳輸過來的blob流數據進行截取轉化為base64后再通過a標簽代理給瀏覽器進行下載

onUpload = () => {
    axios.defaults.headers = {
      "Content-Type": "application/json", // 這兒是通過json格式 傳值，如果需要通過formData形式，可以改，詳情 https://www.cnblogs.com/honkerzh/p/14157038.html
      authorization: `bearer ${this.token}`
    };
    axios({
      method: "post",
      url: "/apps/insight-integration/api/v1/" + this.props.url,
      data: { ext: "csv", ...params }  // post 請求傳值：formData ，或者 json （根據接口的要求傳值即可）
    })
      .then(response => {
        const fileName = response.headers["content-disposition"].split(";")[1].split("=")[1].split(".csv")[0]; // 根據接口返回情況拿到文件名
        const blob = new Blob([response.data], { type: "csv/plain" });  // 通過返回的流數據 手動構建blob 流
        const reader = new FileReader();
        reader.readAsDataURL(blob); // 轉換為base64，可以直接放入a標簽的href （轉換base64還可用 window.atob ，未實驗過）
        reader.onload = e => { // 轉換完成，創建一個a標簽用於下載
          const a = document.createElement("a");
          console.log(decodeURIComponent(fileName));  
          a.download = decodeURIComponent(fileName) + ".csv"; // 構建 下載的文件名稱以及下載的文件格式（可通過傳值輸入）
          if (typeof e.target.result === "string") {
            a.href = e.target.result;
          }
          a.click();
        };
      })
      .catch(error => {
        // doSomething()
      });
  };