工具

关于二进制文件流导出excel前端处理

2021-02-15  本文已影响0人  jesse28

无论是前端用插件导出还是后端返回url导出,总有不尽人意的地方,最后的解决方案是后端生成文件流导出,下面是文件流导出的前端处理代码。

import { getToken } from "@utils/auth";
import axios from "axios";
/**
 * @param {Object} url
 * @url {string} url
 */
export function EXPORT_EXCEL(param, url) {
  let headers = {
    "Content-Type": "application/json", // 设置请求头
    Accept: "application/octet-stream",
    token: getToken(),
  };
  let baseURL = process.env.VUE_APP_BASE_API;
  axios({
    method: "POST",
    url: baseURL + url,
    data: param,
    headers: headers,
    responseType: "arraybuffer",//设置响应类型为ArrayBuffer对象
  }).then((res) => {
    const fileName = new Date().getTime();//文件名
    const _res = res.data;
    let blob = new Blob([_res], {
      type: "application/vnd.ms-excel;charset=utf-8",
    });
    if ("msSaveOrOpenBlob" in navigator) {//兼容ie浏览器
      window.navigator.msSaveOrOpenBlob(blob, fileName + ".xls");//ie下手动添加后缀名
    } else {
      let downloadElement = document.createElement("a");
      let href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      downloadElement.download = fileName; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象
    }
  });
  // .catch(res => {
  //   loadingInstance.close();
  // });
}
上一篇下一篇

猜你喜欢

热点阅读