React前端做导出excel
前言
我给出了两种可行方案,
第一种是前端做导出
第二种是前端请求后端接口返回的是文档流格式,来做导出文件
方案一:前端做导出
考虑到项目急,又要快速满足把数据导出为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";
// 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";
const onExprotExcel = () => {
var fileName = "导出文件.xlsx" // .xlsx必写
var data = {} // 传递给后端的参数
var url = "/export_excel" // 请求后端的地址路径
requestExprot(url,data,fileName) // 调用封装的方法
}