React前端做导出excel

luback

已于 2024-07-09 09:45:40 修改

阅读量972

点赞数 12

文章标签：前端 react.js 前端框架 javascript

于 2024-01-23 15:05:17 首次发布

本文链接：https://blog.csdn.net/luback/article/details/135771350

版权

本文介绍了两种数据导出方案：前端使用js-export-excel插件实现Excel导出，以及通过前端请求后端接口获取文档流格式的数据。详细步骤包括安装插件、引入并配置、以及封装axios请求以支持blob格式。

摘要由CSDN通过智能技术生成

前言

我给出了三种可行方案，

第一种是前端做导出，不适合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的请求接口

步骤一：封装方法（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([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)})
};

在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([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";

<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文件的同一层的

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 [exportLoading, setExportLoading] = 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, [sheetHeader], { origin: 0 });

      // 生成Excel文件
      const excelBuffer: Blob = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 保存文件
      saveAs(new Blob([excelBuffer], { 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>