前端导出 Excel 的方式

前端导出 Excel 的方式已关闭评论

前言

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

实现方式

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

  • react-csv 根据给定的数据生成 CSV 文件,数据可以是二维数组、对象数组或字符串。

  • xlsx[1] 进入 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 字段可以指定表头,即可下载如下 csv 文件,打开效果如下:


使用 numbers 打开效果


xlsx

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

cdn 方式

  1. 首先确保页面上有一个表格,并且有一个唯一 ID:

<table id="TableToExport">
  1. 在页面上引入 SheetJS

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
  1. 添加一个按钮用于导出 Excel

<button id="sheetjsexport"><b>导出 XLSX</b></button>
  1. 绑定点击事件:

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">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 格式,数据会比较好处理。

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

[1]https://www.npmjs.com/package/xlsx: https://www.npmjs.com/package/xlsx

来源: 前端之神