调用接口后端返回文件流，前端进行下载，Excel表格方法，以及Excel表格下载后为[objet][objet]问题处理，Vue、js、react

最新推荐文章于 2025-04-17 16:10:37 发布

kq-blue

最新推荐文章于 2025-04-17 16:10:37 发布

阅读量859

点赞数

文章标签：前端 javascript excel vue.js react.js

本文链接：https://blog.youkuaiyun.com/m0_55074611/article/details/133354424

版权

文章介绍了如何使用Node.js的axios库和qs模块下载Excel文件，包括安装、参数序列化和处理响应类型。解决了一个将响应数据误写为`res`的问题，确保正确导出Excel文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载插件 axios 和 qs

npm  install --save axios,qs

2、引用，调用接口, 下载文件

import axios from 'axios';
import QS from 'qs'

methods:{
// url 地址和 params 传参使用自己的 ，excelName文件名称 
	axios({
        method: 'get',
        url:this.url,
        params: this.params,
        paramsSerializer: function (params) {
          return QS.stringify(params, {
            arrayFormat: 'repeat'
          })
        },
        responseType: 'blob',
      }).then((res) => {
        const filename = this.excelName;
        const fileContent = res.data;
        // application/vnd.ms-excel;charset=utf8
        // 创建 Blob 对象
        const blob = new Blob([fileContent], { type: "application/vnd.ms-excel;charset=utf8"  });
        // 创建下载链接
        const downloadUrl = URL.createObjectURL(blob);
        // 创建下载链接的 <a> 元素
        const downloadLink = document.createElement("a");
        downloadLink.href = downloadUrl;
        downloadLink.download = filename;
        // 模拟点击下载链接
        downloadLink.click();
        // 清理创建的 URL 对象
        URL.revokeObjectURL(downloadUrl);
      });
}