VUE 将后端返回的二进制流前端进行处理实现下载文件（复制可直接使用）

1.创建excel.js

import { getTokenAUTH } from "./auth";
import axios from "axios";
import { Loading, Message } from "element-ui";

//导出接口
export const urls = {
  exportProjectTaskExcel: process.env.VUE_APP_EXCEL, //任务列表导出
};
/**
 * 公共导出方法
 * @param url
 * @param options
 * @returns {Promise}
 */
export function exportExcel(url, options = {}, method) {
  let loading = Loading.service({
    target: "#ark-per-table",
    text: "正在导出数据,请稍后...",
    background: "rgba(0, 0, 0, 0.1)",
  });

  return new Promise((resolve, reject) => {
    //获取登录的token
    if (getTokenAUTH()) {
      axios.defaults.headers["authorization"] = getTokenAUTH();
    }
    //规定内容类型
    axios.defaults.headers["content-type"] = "application/json;charset=UTF-8";

    axios({
      method: method ? method : "post", //判断请求方法
      url: url, // 请求地址
      data: options, // 参数
      responseType: "blob", // 表明返回服务器返回的数据类型
    })
      .then((res) => {
        loading.close();
        const link = document.createElement("a");
        // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型，先定义成blob对象格式
        let blob = res.data; //如果后台返回的直接是blob对象类型，直接获取数据
        let fileName = res.headers["content-disposition"].split("=")[1]; //拆解获取文件名（这个要根据后台返回来拆解）
        link.style.display = "none";

        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL;
        link.href = url.createObjectURL(blob);
        link.download = decodeURI(fileName); //下载的文件名称
        link.click();
        window.URL.revokeObjectURL(url); //  #URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.
      })
      .catch((error) => {
        console.log(error);
        Message({
          message: "导出错误！",
          type: "error",
          duration: 5 * 1000,
        });
      });
    console.log(resolve); //严格模式下需要
    console.log(reject); //严格模式下需要
  });
}

2.引入创建的exceljs   

import { urls, exportExcel } from "@/api/excel.js"; 

3.在需要使用的位置使用引入的JS里面的方法

   exportExcel(urls.exportProjectTaskExcel, { projectTaskIds }).then(() => {
        this.$message({ message: "导出成功!", type: "success" });
      });