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) // 调用封装的方法}