NetCore Vue前端实现导出功能及解决导出excel表格无法打开的问题

今天做接口导出功能测试，VUE调用接口下载文件总是打不开，使用浏览器或者Postman访问保存文件均正常，接口代码返回如下图：

 后台返回数据：

 VUE前端下载后打开，如图：

 经过一番查找测试之后，因为接口时post的问题，所以传递参数有区别：

1.解析后台返回的文件流

这种方式就是后台将要导出的文件以文件流的方式返回给前端，前端通过blob去解析，再动态创建a标签。

封装单独的导出接口：

xxx.js

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * * @param {Object} responseType [ 关键，不设置导出的文件无法打开]
 */
export function getBlob(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
        responseType: "arraybuffer",
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

要在请求拦截器加上responseType = 'arraybuffer'，必须设置，否则导出excel表格打不开，这是get请求，如果Post请求将参数{responseType ='arraybuffer'}加上大括号，否则可能出现打不开的情况，本人项目中封装使用如下：

  

api.js

// 一键导出
export const exportUpload = (names) =>
  getBlob(`/defence/Defence/exportUpload?names=${names}`);

页面通过点击导出：

// 一键导出
    async exportUpload() {
      // window.location = `/defence/Defence/exportUpload?names=${this.queryInfo.names}`;
      // let params = {
      //   names: this.queryInfo.names,
      // };
      // window.open(
      //   `http://172.16.1.120:8080/defence/Defence/exportUpload?names=${this.queryInfo.names}`
      // );
      // window.location.href = `/defence/Defence/exportUpload?names=${this.queryInfo.names}`;
      const res = await exportUpload(this.queryInfo.names);
      console.log(res.data);
      this.resolveBlob(res.data);
    },
    // 处理返回的数据格式
    resolveBlob(res) {
      const link = document.createElement("a");
      link.style.dispaly = "none";
      let binaryData = [];
      binaryData.push(res);
      link.href = window.URL.createObjectURL(new Blob(binaryData));
      // link.href = URL.createObjectURL(res);
      link.setAttribute("download", "装备数据.xlsx");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

2.数据、文件格式全部在后台封装好，返回给前端一个链接，前端通过点击链接自动下载

window.location.href = '/api/xxx/xxx'。
window.open('/api/xxx/xxx?params')。
导 出