利用 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()
      });
  };