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

最新推荐文章于 2025-07-31 11:11:29 发布

原创最新推荐文章于 2025-07-31 11:11:29 发布 · 9.6w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#NetCore #vue #excel

.Net Core 同时被 2 个专栏收录

165 篇文章

订阅专栏

VUE

11 篇文章

订阅专栏

本文档描述了在Vue项目中遇到POST接口下载文件无法打开的问题，以及解决方案。问题源于Vue前端调用POST接口下载文件时，由于响应类型设置不当导致文件无法正确打开。解决方案包括：1) 通过解析后台返回的文件流，利用Blob处理数据并创建a标签进行下载；2) 后台封装好文件链接，前端通过链接直接下载。同时，文中提供了相关代码示例和调用方式。

今天做接口导出功能测试，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')。
<a href={`/api/xxx/xxx?params`} download="报表.xlsx">导 出</a>