前言

我给出了两种可行方案，

第一种是前端做导出

第二种是前端请求后端接口返回的是文档流格式，来做导出文件

方案一：前端做导出

考虑到项目急，又要快速满足把数据导出为excel文件，或者把table数据做导出，都是可以用这个插件做excel文件导出，你只需准备好你导出的数据就行。

我使用的是 js-export-excel 插件

步骤一：安装js-export-excel 插件

npm命令       npm install js-export-excel --save

yarn命令      yarn add  js-export-excel --save

 要是安装失败，或者使用失败，可以重新安装特定的版本试试

npm install js-export-excel@1.1.4 --save

yarn add  js-export-excel@1.1.4 --save

步骤二：引入

import ExportJsonExcel from 'js-export-excel';

步骤三：写个按钮，点击调用方法

import {Button} from "antd";<Button type="primary" shape="round" onClick={onExprotExcel}>导出</Button>// data数据是随便写的测试数据，可以参考看看const data = [ { question:"你喜欢什么？"， create_time："2024-01-24 05:20:00" }，{ question:"你讨厌什么？"， create_time："2024-01-24 05:20:00" }]const onExprotExcel = ()  => { if(data && data.length>0){ //data是数组需要导出的数据 const getRepaymentPlanList = JSON.parse(JSON.stringify(data)) const option = []; //option代表的就是excel文件 option.fileName = "文件命名" const sheetData = getRepaymentPlanList; // 有需要映射的话需要先映射 const sheetFilter = ["question","create_time"]; const sheetHeader = ['问题', '创建时间']; option.datas = [{ sheetData, sheetName: "个人信息表", sheetFilter, sheetHeader, columnWidth: new Array(sheetHeader.length).fill(20), }]; let toExcel = new ExportJsonExcel(option);  // 生成excel文件 toExcel.saveExcel();  // 下载excel文件 }}

方案二：请求后端做导出

后端返回的是文档流格式，前端请求头的类型也应该是文档流blob

前端需要自己封装axios请求类型是blob的请求接口

步骤一：封装方法

在utils文件夹中创建requestExport.js文件

import Axios from "axios"import { getToken } from "@/utils";import {message} from "antd";// url(请求地址),data（传参）,fileName（文件命名）export default function requestExprot(url,data,fileName) { let token = getToken(); Axios({ url, method:"POST", responseType:'blob', headers:{ "Content-Type": " application/json;charset=UTF-8", "cattoken": token // 这里传的是token和token名称字段是什么，看自己项目而定 }, data }).then(res=>{ const blob=new Blob([res.data]) let reader=new FileReader() //将blob格式的响应数据转换为原本的格式，方便判断接口是否返回报错信息 reader.readAsText(blob) reader.onload=e=>{ if(e.target.result.indexOf('"statusCode"')>=0){ message.error(JSON.parse(e.target.result).message) }else{ if('download' in document.createElement('a')){ message.success('导出成功') const link=document.createElement('a') link.download = fileName link.style.display='none' link.href=URL.createObjectURL(blob) document.body.appendChild(link) link.click() URL.revokeObjectURL(link) document.body.removeChild(link) }else{ navigator.msSaveBlob(blob,fileName) } } } }).catch(err=>{console.log(err)})};

步骤二：引入，使用方法

import requestExprot from '@/utils/requestExprot'import {Button} from "antd";<Button type="primary" shape="round" onClick={onExprotExcel}>导出</Button>const onExprotExcel = () => { var fileName = "导出文件.xlsx" // .xlsx必写 var data = {} // 传递给后端的参数 var url = "/export_excel" // 请求后端的地址路径 requestExprot(url,data,fileName) // 调用封装的方法}