如何通过React.js实现前端导出为Excel文件的长尾功能？

本文共计1414个文字，预计阅读时间需要6分钟。

目录+前言+实现方式+CSV+与Excel的区别+react-csv+xlsx+cdn+在react中使用json转excel+结句+前言+前段时间，项目上有需求需要将数据报表导出为Excel格式，这是后端的工作，前端只需前

目录

• 前言
• 实现方式
• csv 与 Excel 的区别
• react-csv
• xlsx
• cdn 方式
• 在 react 中使用
• json 转 excel
• 结语

前言

前段时间，项目上有个需求需要将数据报表导出为 excel 的需求，这本来是后端的工作，前端只需要一个 a 标签，就可以下载文件，但不巧的是，正好遇到后端请假，而且项目比较着急，那么前端是否可以实现呢？

实现方式

经过一顿搜索后，发现有这么几个 npm 库

• react-csv
• 根据给定的数据生成 CSV 文件，数据可以是二维数组、对象数组或字符串。
• xlsx 进入 xlsx 官网，官网称为 SheetJS，它支持浏览器、nodejs、deno、和 react-native，浏览器兼容 ie10+。 SheetJS 社区版提供经过实战考验的开源解决方案，用于从几乎所有复杂的电子表格中提取有用的数据，并生成新的电子表格，这些新的电子表格可以与传统软件和现代软件一起使用。

csv 与 Excel 的区别

从名字上看一个是导出 csv，一个是导出 excel，那么这 2 者有什么区别呢？

Excel 是一个电子表格，将文件保存为自己的专有格式，即 xls 或 xlsx，它保存有关工作簿中所有工作表的信息

CSV 代表 Comma Separated Values ，这是一个纯文本格式，用逗号分隔一系列值，但不包含格式，公式，宏等，扩展名为.csv 的分隔文本文件的格式

总结来说，Excel 不仅可以存储数据，还可以对数据进行操作，CSV 文件只是一个文本文件，它存储数据，它也被称为平面文件，任何用于解析 Excel 数据的编程语言库通常都会更大，更慢，更复杂，任何编程语言来解析 CSV 数据是微不足道的，生成它是非常容易的。

react-csv

实现代码

import React from 'react'; import { CSVLink } from 'react-csv'; const headers = [ { label: 'First Name', key: 'firstname' }, { label: 'Last Name', key: 'lastname' }, { label: 'Email', key: 'email' }, ]; const data = [ { firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' }, { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' }, { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' }, ]; export default function App() { return ( <CSVLink data={data} headers={headers}> Download me </CSVLink> ); }

react-csv 使用非常简单，只需要 npm 安装后就可以使用，使用 headers 字段可以指定表头。

xlsx

xlsx 官网有数据导入、数据导出、数据处理等功能，非常强大，这里我们只处理数据到功能。

cdn 方式

• 首先确保页面上有一个表格，并且有一个唯一 ID:

<table id="TableToExport">

• 在页面上引入 SheetJS

<script src="cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

• 添加一个按钮用于导出 Excel

<button id="sheetjsexport"><b>导出 XLSX</b></button>

• 绑定点击事件:

document.getElementById("sheetjsexport").addEventListener('click', function() { /*根据页面上的表格创建工作表 */ var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport")); /* 导出文件下载 */ XLSX.writeFile(wb, "SheetJSTable.xlsx"); });

在 react 中使用

function Table2XLSX(props) { const xport = async () => { const table = document.getElementById("Table2XLSX"); const wb = XLSX.utils.table_to_book(table); XLSX.writeFile(wb, "SheetJSTable.xlsx"); }; return (<> <table id="Table2XLSX"><tbody> <tr><td colSpan="3">SheetJS Table Export</td></tr> <tr><td>Author</td><td>ID</td><td>Note</td></tr> <tr><td>SheetJS</td><td>7262</td><td>Hi!</td></tr> <tr><td colSpan="3"> <a href="//sheetjs.com" rel="external nofollow" >Powered by SheetJS</a> </td></tr> </tbody></table> <button onClick={xport}><b>Export XLSX!</b></button> </>); }

以上方法是将页面上的表格转为 excel，那么能否跟 react-csv 一样json 转 excel 呢？

json 转 excel

/** * 导出 excel 文件 * @param array JSON 数组 * @param sheetName 第一张表名 * @param fileName 文件名 */ export function exportExcelFile(array=[], sheetName = 'sheet表', fileName = 'example.xlsx') { const jsonWorkSheet = xlsx.utils.json_to_sheet(array); const workBook = { SheetNames: [sheetName], Sheets: { [sheetName]: jsonWorkSheet, } }; return xlsx.writeFile(workBook, fileName); }

xlsx.utils.json_to_sheet 可以将 JSON 数据存储到 sheet 中，然后使用 xlsx.writeFile 写入文件并且下载。

<button disabled={dataSource.length === 0} onClick={() => exportExcelFile(dataSource)} > 导出 Excel </button>

结语

如果你有多个 Sheet 要导出成一个 excel，就只能使用 xlsx，其实对于我们的项目需求，只有个表要导出使用 xlsx 和 csv 都可以，如果导出的数据需要给其他程序处理，建议使用 csv 格式，数据会比较好处理。

以上就是React.js前端导出Excel的方式的详细内容，更多关于React.js前端导出Excel的资料请关注易盾网络其它相关文章！