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