React前端做导出excel
媒介我给出了三种可行方案，
第一种是前端做导出，不适合ts
第二种是前端请求后端接口返回的是文档流格式，来做导出文件
第三种是前端做导出，实用于ts
方案一：前端做导出
考虑到项目急，又要快速满意把数据导出为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的请求接口
文件命名必须有文件后缀，不限于后缀.xlsx
步骤一：封装方法 （js文件）
在utils文件夹中创建requestExport.js文件 POST请求版本
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()
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)})
}; 在utils文件夹中创建requestExport.js文件 GET请求版本
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: "GET",
responseType: 'blob',
headers: {
"Content-Type": " application/json;charset=UTF-8",
"cattoken": token// 这里传的是token和token名称字段是什么，看自己项目而定
},
params:{
...data
}
}).then(res=>{
const blob=new Blob()
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) // 调用封装的方法
} React Ts前端导出方案
我发现 js-export-excel 缺少ts,导出就会报错，以是我找了一个其他的导出数据方法
步骤一：安装插件
npm install xlsx file-saver --save 步骤二： 引入
file-saver也会出现没有ts的报错信息，但这个信息我们可以自定义ts，办理ts报错
1. 创建文件 file-saver.d.ts，位置我是放在使用 file-saver文件的同一层的
https://i-blog.csdnimg.cn/blog_migrate/839b03d0fe225022b668bc30dd37c339.png
2. 找到tsconfig.json文件，引入file-saver.d.ts
{
"compilerOptions": { },
"include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx","file-saver.d.ts"] // 在这里
} 步骤三： 使用，包括了引入插件，导出方法
//-------引入------
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import { Button, message } from 'antd';
//-----数据 data数据是随便写的测试数据，可以参考看看----
const data = [
{
question:"你喜欢什么？"，
create_time："2024-01-24 05:20:00"
}，{
question:"你讨厌什么？"，
create_time："2024-01-24 05:20:00"
}
]
//-----导出方法----
const = useState(false);
const onExportExls = () => {
setExportLoading(true)
if (data && data.length > 0) { //data是数组需要导出的数据
const getRepaymentPlanList = JSON.parse(JSON.stringify(data))
const fileName = `导出的文件命名.xlsx`// .xlsx必要不变的
const sheetData = getRepaymentPlanList; // 有需要映射的话需要先映射
const sheetFilter = ["question","create_time"];
const sheetHeader = ['问题', "时间"];
// 创建一个空的 workbook 对象
const workbook = XLSX.utils.book_new();
// 将数据转换为工作表，并包含表头
const worksheet = XLSX.utils.json_to_sheet(sheetData, { header: sheetFilter as any });
// 设置工作表的列宽
const sheetcols = sheetHeader.map(h => ({ wch: h.lengt + 10 }));
worksheet['!cols'] = sheetcols;
// 添加工作表到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 创建工作表的第一行作为表头
XLSX.utils.sheet_add_aoa(worksheet, , { origin: 0 });
// 生成Excel文件
const excelBuffer: Blob = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
// 保存文件
saveAs(new Blob(, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), fileName);
message.success('导出成功')
setExportLoading(false)
} else {
message.warning('暂未可导出的数据')
setExportLoading(false)
}
}
// -----------导出按钮-----------
<Button type="primary"onClick={onExportExls} loading={exportLoading}>
导出
</Button>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]