/**
 *  原生JS導(dǎo)出為excel文件
 */
export const jsToExcel = (id, name) => {
    //window.location.href='<%=basePath%>pmb/excelShowInfo.do';
    //獲取表格
    var exportFileContent = document.getElementById(id).outerHTML;
    //設(shè)置格式為Excel，表格內(nèi)容通過(guò)btoa轉(zhuǎn)化為base64，此方法只在文件較小時(shí)使用(小于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" });         //解決中文亂碼問(wèn)題
    blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
    //設(shè)置鏈接
    var link = window.URL.createObjectURL(blob);
    var a = document.createElement("a");    //創(chuàng)建a標(biāo)簽
    a.download = name;  //設(shè)置被下載的超鏈接目標(biāo)（文件名）   建議文件后綴為 .xls
    a.href = link;                            //設(shè)置a標(biāo)簽的鏈接
    document.body.appendChild(a);            //a標(biāo)簽添加到頁(yè)面
    a.click();                                //設(shè)置a標(biāo)簽觸發(fā)單擊事件
    document.body.removeChild(a);            //移除a標(biāo)簽
}

<table id='table_report'>...</table>
<div onClick={() => jsToExcel('table_report', '現(xiàn)券交易異常日?qǐng)?bào).xls')}>導(dǎo)出</div>

import XLSX from "xlsx"


/**
 *  用XLSX導(dǎo)出 (導(dǎo)出無(wú)樣式)
 */
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', '現(xiàn)券交易異常日?qǐng)?bào).xlsx')}>導(dǎo)出</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: "調(diào)休",
      name: "張三"
    },
    {
      adID: "張三1",
      leaveCount: 526,
      leaveDuration: 82,
      leaveType: "調(diào)休",
      name: "張三1"
    },
    {
      adID: "張三1",
      leaveCount: 26,
      leaveDuration: 852,
      leaveType: "調(diào)休",
      name: "張三1"
    },
    {
      adID: "張三1",
      leaveCount: 256,
      leaveDuration: 82,
      leaveType: "調(diào)休",
      name: "張三1"
    },
  ]
  /**
   *  導(dǎo)出數(shù)據(jù)
   */
  const handleExportCurrentExcel = (data) => {
    let sheetFilter = ["name", "leaveType", "leaveCount", "leaveDuration"];
    let sheetFilter2 = ["name", "leaveType", "leaveCount", "leaveDuration"];
    let option = {};
    option.fileName = '考勤分析結(jié)果';
    option.datas = [
      {
        sheetData: data1,
        sheetName: '考勤分析結(jié)果',
        sheetFilter: sheetFilter,
        sheetHeader: ['姓名', '類型', '次數(shù)', '時(shí)長(zhǎng)'],
        columnWidths: [10, 10, 10, 10]
      },
      {
        sheetData: data1,  //比較懶得造數(shù)據(jù)了  跟表1數(shù)據(jù)一樣
        sheetName: '考勤分析結(jié)果222',
        sheetFilter: sheetFilter2,
        sheetHeader: ['姓名22', '類型22', '次數(shù)22', '時(shí)長(zhǎng)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' />
        導(dǎo)出當(dāng)前數(shù)據(jù)
      </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來(lái)獲取組件按鈕實(shí)例，使用里面的方法
    const buttonRef = useRef(null);

    // 禁止組件按鈕的默認(rèn)點(diǎn)擊事件
    useEffect(() => {
        const button = document.querySelector('#test-table-xls-button');
        button.style['pointer-events'] = ('none');
    }, []);


    // 導(dǎo)出表格
    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字段對(duì)應(yīng)
        container.appendChild(tempTable);                                // 把創(chuàng)建的節(jié)點(diǎn)添加到頁(yè)面容器中
        buttonRef.current.handleDownload();                              // 手動(dòng)觸發(fā)下載
    };
    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='回購(gòu)日?qǐng)?bào)'
                    sheet='表1'
                    buttonText='導(dǎo)出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;