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
  步骤二：引入

1. import ExportJsonExcel from 'js-export-excel';

复制代码

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

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

复制代码

方案二：请求后端做导出

   后端返回的是文档流格式，前端请求头的类型也应该是文档流blob
  前端必要自己封装axios请求类型是blob的请求接口
  文件命名必须有文件后缀，不限于后缀.xlsx
  步骤一：封装方法 （js文件）

在utils文件夹中创建requestExport.js文件  POST请求版本

1. import Axios from "axios"
2. import { getToken } from "@/utils";
3. import {message} from "antd";
4. // url(请求地址),data（传参）,fileName（文件命名）
5. export default function requestExprot(url,data,fileName) {
6.     let token = getToken();
7.     Axios({
8.         url,
9.         method:"POST",
10.         responseType:'blob',
11.         headers:{
12.             "Content-Type": " application/json;charset=UTF-8",
13.             "cattoken": token  // 这里传的是token和token名称字段是什么，看自己项目而定
14.         },
15.     data
16.     }).then(res=>{
17.     const blob=new Blob([res.data])
18.     let reader=new FileReader() //将blob格式的响应数据转换为原本的格式，方便判断接口是否返回报错信息
19.     reader.readAsText(blob)
20.     reader.onload=e=>{
21.     if(e.target.result.indexOf('"statusCode"')>=0){
22.         message.error(JSON.parse(e.target.result).message)
23.     }else{
24.         if('download' in document.createElement('a')){
25.             message.success('导出成功')
26.             const link=document.createElement('a')
27.             link.download = fileName
28.             link.style.display='none'
29.             link.href=URL.createObjectURL(blob)
30.             document.body.appendChild(link)
31.             link.click()
32.             URL.revokeObjectURL(link)
33.             document.body.removeChild(link)
34.         }else{
35.             navigator.msSaveBlob(blob,fileName)
36.         }
37.      }
38.     }
39.     }).catch(err=>{console.log(err)})
40. };

复制代码

在utils文件夹中创建requestExport.js文件  GET请求版本

1. import Axios from "axios"
2. import { getToken } from "@/utils";
3. import {message} from "antd";
4. // url(请求地址),data（传参）,fileName（文件命名）
5. export default function requestExprot(url,data,fileName) {
6.     let token = getToken();
7.     Axios({
8.     url,
9.     method: "GET",
10.     responseType: 'blob',
11.     headers: {
12.       "Content-Type": " application/json;charset=UTF-8",
13.       "cattoken": token  // 这里传的是token和token名称字段是什么，看自己项目而定
14.     },
15.     params:{
16.       ...data
17.     }
18.   }).then(res=>{
19.     const blob=new Blob([res.data])
20.     let reader=new FileReader() //将blob格式的响应数据转换为原本的格式，方便判断接口是否返回报错信息
21.     reader.readAsText(blob)
22.     reader.onload=e=>{
23.     if(e.target.result.indexOf('"statusCode"')>=0){
24.         message.error(JSON.parse(e.target.result).message)
25.     }else{
26.         if('download' in document.createElement('a')){
27.             message.success('导出成功')
28.             const link=document.createElement('a')
29.             link.download = fileName
30.             link.style.display='none'
31.             link.href=URL.createObjectURL(blob)
32.             document.body.appendChild(link)
33.             link.click()
34.             URL.revokeObjectURL(link)
35.             document.body.removeChild(link)
36.         }else{
37.             navigator.msSaveBlob(blob,fileName)
38.         }
39.      }
40.     }
41.     }).catch(err=>{console.log(err)})
42. };

复制代码

步骤二：引入，使用方法

1. import requestExprot from '@/utils/requestExprot'
2. import {Button} from "antd";
4. <Button type="primary" shape="round" onClick={onExprotExcel}>导出</Button>
6. const onExprotExcel = () => {
7.     var fileName = "导出文件.xlsx"   // 例如 .xlsx 后缀名必写，
8.         // 我发现后缀名是什么就导出什么格式，
9.         // 所以流请求的方法，其实是通用的，适用于导出所有格式的文件
10.     var data = {} // 传递给后端的参数
11.     var url = "/export_excel"  // 请求后端的地址路径
12.     requestExprot(url,data,fileName) // 调用封装的方法
13. }

复制代码

React Ts前端导出方案

   我发现 js-export-excel 缺少ts,导出就会报错，以是我找了一个其他的导出数据方法
   步骤一：安装插件

1. npm install xlsx file-saver --save

复制代码

步骤二： 引入

   file-saver也会出现没有ts的报错信息，但这个信息我们可以自定义ts，办理ts报错
  1. 创建文件 file-saver.d.ts，位置我是放在使用 file-saver文件的同一层的

2. 找到tsconfig.json文件，引入file-saver.d.ts

1. {
2.   "compilerOptions": { },
3.   "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx","file-saver.d.ts"] // 在这里
4. }

复制代码

步骤三： 使用，包括了引入插件，导出方法

1. //-------引入------
2. import * as XLSX from 'xlsx';
3. import { saveAs } from 'file-saver';
4. import { Button, message } from 'antd';
6. //-----数据 data数据是随便写的测试数据，可以参考看看----
7. const data = [
8.   {
9.     question:"你喜欢什么？"，
10.     create_time："2024-01-24 05:20:00"
11.   }，{
12.     question:"你讨厌什么？"，
13.     create_time："2024-01-24 05:20:00"
14.   }
15. ]
17. //-----导出方法----
18. const [exportLoading, setExportLoading] = useState(false);
19. const onExportExls = () => {
20.     setExportLoading(true)
21.     if (data && data.length > 0) { //data是数组需要导出的数据
22.       const getRepaymentPlanList = JSON.parse(JSON.stringify(data))
23.       const fileName = `导出的文件命名.xlsx`  // .xlsx必要不变的
24.       const sheetData = getRepaymentPlanList; // 有需要映射的话需要先映射
25.       const sheetFilter = ["question","create_time"];
26.       const sheetHeader = ['问题', "时间"];
27.       // 创建一个空的 workbook 对象
28.       const workbook = XLSX.utils.book_new();
30.       // 将数据转换为工作表，并包含表头
31.       const worksheet = XLSX.utils.json_to_sheet(sheetData, { header: sheetFilter as any });
33.       // 设置工作表的列宽
34.       const sheetcols = sheetHeader.map(h => ({ wch: h.lengt + 10 }));
35.       worksheet['!cols'] = sheetcols;
37.       // 添加工作表到工作簿
38.       XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
40.       // 创建工作表的第一行作为表头
41.       XLSX.utils.sheet_add_aoa(worksheet, [sheetHeader], { origin: 0 });
43.       // 生成Excel文件
44.       const excelBuffer: Blob = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
46.       // 保存文件
47.       saveAs(new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), fileName);
49.       message.success('导出成功')
50.       setExportLoading(false)
51.     } else {
52.       message.warning('暂未可导出的数据')
53.       setExportLoading(false)
54.     }
55.   }
57. // -----------导出按钮-----------
58. <Button type="primary"  onClick={onExportExls} loading={exportLoading}>
59.      导出
60. </Button>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。