react导出excel文件的四种方式
作者：摸鱼第一人
本文主要介绍了react导出excel文件的四种方式,主要包括原生js导出,使用 js-export-excel,使用xlsx导出, 使用react-html-table-to-excel,感兴趣的可以了解一下
一共总结了四种方法 前两种适用范围比较广泛 可以适用导出多级表头合并等，第三种方法导出的文件比较中规中矩，但是支持导出多张sheet表。第四种方法导出不推荐使用
1、原生js导出 （带样式）
/**
* 原生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>如果想导出xlsx格式请参考方法2，方法1仅改文件后缀 不会被Excel识别 但是wps可以
2、使用xlsx导出（此方法导出的excel文件无样式,但导出的文件格式是 xlsx格式的）
首先安装xlsx ： yarn add xlsx
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>3、使用 js-export-excel （可以导出多张sheet表）
首先安装 js-export-excel ： yarn add js-export-excel
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;4、第四种 使用react-html-table-to-excel 不推荐使用
安装 react-html-table-to-excel ： yarn add react-html-table-to-excel
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;到此这篇关于react导出excel文件的四种方式的文章就介绍到这了,更多相关react导出excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！