react导出excel文件的四种方式

/**
 *  原生JS导出为excel文件
 */
export const jsToExcel = (id, name) => {
    //window.location.href='<%=basePath%>pmb/excelShowInfo.do';
    //获取表格
    var exportFileContent = document.getElementById(id).outerHTML;
    //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
    //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
    //var link = "data:"+MIMEType+";base64," + exportFileContent;
    //使用Blob
    var blob = new Blob([exportFileContent], { type: "text/plain;charset=utf-8" });         //解决中文乱码问题
    blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
    //设置链接
    var link = window.URL.createObjectURL(blob);
    var a = document.createElement("a");    //创建a标签
    a.download = name;  //设置被下载的超链接目标（文件名）   建议文件后缀为 .xls
    a.href = link;                            //设置a标签的链接
    document.body.appendChild(a);            //a标签添加到页面
    a.click();                                //设置a标签触发单击事件
    document.body.removeChild(a);            //移除a标签
}

<table id='table_report'>...</table>
<div onClick={() => jsToExcel('table_report', '现券交易异常日报.xls')}>导出</div>

import XLSX from "xlsx"


/**
 *  用XLSX导出 (导出无样式)
 */
export const exportExcel = (id, name) => {
    var exportFileContent = document.getElementById(id).cloneNode(true);
    var wb = XLSX.utils.table_to_book(exportFileContent, { sheet: "sheet1" });
    XLSX.writeFile(wb, name);
}

<table id='table_report'>...</table>
<div onClick = {() => exportExcel('table_report', '现券交易异常日报.xlsx')}>导出</div>

import { Table } from 'antd';
import { columns } from './config';
import ExportJsonExcel from "js-export-excel";
import { PlusCircleOutlined } from '@ant-design/icons';

function Tables(props) {
  const { isLoading, viewData, data } = props;
  // data格式
  const data1 = [
    {
      adID: "张三",
      leaveCount: 26,
      leaveDuration: 82,
      leaveType: "调休",
      name: "张三"
    },
    {
      adID: "张三1",
      leaveCount: 526,
      leaveDuration: 82,
      leaveType: "调休",
      name: "张三1"
    },
    {
      adID: "张三1",
      leaveCount: 26,
      leaveDuration: 852,
      leaveType: "调休",
      name: "张三1"
    },
    {
      adID: "张三1",
      leaveCount: 256,
      leaveDuration: 82,
      leaveType: "调休",
      name: "张三1"
    },
  ]
  /**
   *  导出数据
   */
  const handleExportCurrentExcel = (data) => {
    let sheetFilter = ["name", "leaveType", "leaveCount", "leaveDuration"];
    let sheetFilter2 = ["name", "leaveType", "leaveCount", "leaveDuration"];
    let option = {};
    option.fileName = '考勤分析结果';
    option.datas = [
      {
        sheetData: data1,
        sheetName: '考勤分析结果',
        sheetFilter: sheetFilter,
        sheetHeader: ['姓名', '类型', '次数', '时长'],
        columnWidths: [10, 10, 10, 10]
      },
      {
        sheetData: data1,  //比较懒得造数据了  跟表1数据一样
        sheetName: '考勤分析结果222',
        sheetFilter: sheetFilter2,
        sheetHeader: ['姓名22', '类型22', '次数22', '时长22'],
        columnWidths: [10, 10, 10, 10]
      },
    ];
    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  }

  return (
    <div>
      <div className='exportButton' onClick={() => handleExportCurrentExcel(data)}>
        <PlusCircleOutlined className='icon-but' />
        导出当前数据
      </div>
      <Table
        loading={isLoading}
        columns={columns}
        dataSource={viewData}
        pagination={false}
      />
    </div>
  )
}
export default Tables;

import React, {  useRef, useEffect } from 'react';
import { Table } from "antd";
import {  columns } from './config';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import styles from './index.module.less';
function StudyExcel() {

    const data = [
        {
            key: '0',
            name: '张三'
        },
        {
            key: '1',
            name: '赵四'
        },
        {
            key: '2',
            name: '王五'
        },
        {
            key: '3',
            name: '齐六'
        }
    ];

    // 用ref来获取组件按钮实例，使用里面的方法
    const buttonRef = useRef(null);

    // 禁止组件按钮的默认点击事件
    useEffect(() => {
        const button = document.querySelector('#test-table-xls-button');
        button.style['pointer-events'] = ('none');
    }, []);


    // 导出表格
    const exportTable = (e) => {
        e.stopPropagation();
        const table = document.getElementsByTagName('table');
        const container = document.querySelector('#hiddenBox');
        const tempTable = document.createElement('table');
        tempTable.appendChild(table[0]);
        tempTable.setAttribute('id', 'table-to-xls');                    // 给table添加id，值与按钮上的table字段对应
        container.appendChild(tempTable);                                // 把创建的节点添加到页面容器中
        buttonRef.current.handleDownload();                              // 手动触发下载
    };
    return (
        <div style={{ backgroundColor: '#fff' }} className={styles.container}>
            <span onClick={(e) => exportTable(e)}>
                <ReactHTMLTableToExcel
                    width={1900}
                    ref={buttonRef}
                    table="table-to-xls"
                    id='test-table-xls-button'
                    filename='回购日报'
                    sheet='表1'
                    buttonText='导出Excel'
                />
            </span>
            <Table
                columns={columns}
                dataSource={data}
                bordered
                pagination={false}
            />
            <div id='hiddenBox' style={{ position: 'absolute', zIndex: -1, top: 0, left: 0 }} />
        </div>
    )
}
export default StudyExcel;