文件导出几类方式

176 阅读1分钟

fetch post直接生成数据流文件

 postBob(url, data, headers, option) {
  if (!option || option.ignoreAOP !== true) {
    before(url, data, headers);
  }

  headers = {
    method: "POST",
    //mode: 'cors',
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      ...headers,
      Authorization: getAccessToken(),
    },
    body: JSON.stringify(data),
  };

  return new Promise((resolve, reject) => {
    fetch(url, headers)
      .then((response) => response.blob())
      .then((blob) => {
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.download = data.fileName ? data.fileName : "下载文件.xlsx";
        a.click();
        let _responseJson = after(
          { code: 200, count: 0, data: [], msg: "导出成功!" },
          url,
          data,
          headers
        );

        return resolve(_responseJson);
      })
      .catch((error) => {
        if (error) {
          if (
            error.message &&
            error.message.toLowerCase().indexOf("fetch") > -1
          ) {
            return {
              networkException: true,
            };
          }
        }
        return reject(error);
      });
  });
}

iframe form表单提交文件导出

function formPostIframe(url, data, isFree) {
  data = data || {};

  if (
    document.getElementsByName("ifr") &&
    document.getElementsByName("ifr")[0]
  ) {
    let ifr = document.getElementsByName("ifr")[0];
    document.body.removeChild(ifr);
  }

  var accessToken = getAccessToken();
  if (!!accessToken && !isFree) {
    data["Authorization"] = accessToken;
  }
  var postForm = document.createElement("form");
  var iframe = "";
  try {
    iframe = document.createElement(
      '<iframe name="ifr" style="display:none"></iframe>'
    );
  } catch (e) {
    iframe = document.createElement("iframe");
    iframe.name = "ifr";
  }
  postForm.method = "post";
  postForm.action = formatUrl(url);
  postForm.target = "ifr";
  postForm.headers = {
    Authorization: getAccessToken(),
    "X-Frame-Options": "SAMEORIGIN",
  };
  var keys = Object.keys(data);

  for (var k of keys) {
    let val = data[k] == null ? false : true;
    if (val) {
      var hiddenInput = document.createElement("input");
      hiddenInput.setAttribute("name", k);
      if (typeof data[k] == "object") {
        hiddenInput.setAttribute("value", JSON.stringify(data[k]));
      } else {
        hiddenInput.setAttribute("value", data[k]);
      }
      postForm.appendChild(hiddenInput);
    }
  }

  document.body.appendChild(iframe);
  document.body.appendChild(postForm);
  postForm.submit();
  document.body.removeChild(postForm);
}
  • 第一种式导出的浏览器支持度不是很清楚
  • 第二种有可能会遇到Ifram跨域
  • 性能问题暂时没有发现两者区别