SheetJS生成/解析Excel

2024-04-30 00:24:23

前言

新公司的后台经常有一些数据导出的功能，而不少情况是导出筛选出来的数据(没有分页的那种)。

这个时候，再让后端去跑一遍逻辑，有点浪费，如果前端可以自己做完就完美了。

SheetJS(js-xlsx)

项目地址：sheetjs

因为需求比较简单，只是导入导出，目前还没遇到什么问题。

官方有 Pro 版，看到有人说过，有很多版本，具体报价还是看诉求。

兼容性

使用方式

官方的 README.md 已经介绍的很详细了，下面简单介绍一下。

使用CDN

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

使用NPM

npm install xlsx

官方demo

官方的 demo 还是蛮多的，链接：github

有部分 demo 可能存在问题，看的时候最好运行一遍。

简单下载示例

这里演示了 aoa_to_sheet 和 json_to_sheet 两种方式。

还有 table_to_sheet 可以直接将 DOM 直接转换成 excel。目前没有这方面诉求，也就没尝试这个方式，猜测可能对于 DOM 有一些要求。

Demo 传送门

/*** JSON转换Excel*/
function json2Sheet () {let json = [{"姓名": "张三","性别": "男","年龄": 18},{"姓名": "李四","性别": "女","年龄": 19},{"姓名": "王二麻","性别": "未知","年龄": 20}]// 实例化一个工作簿let book = XLSX.utils.book_new()// 实例化一个Sheetlet sheet = XLSX.utils.json_to_sheet(json, {header: ['姓名', '性别', '年龄']})// 将Sheet写入工作簿XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')// 写入文件，直接触发浏览器的下载XLSX.writeFile(book, 'json2Sheet.xlsx')
}/*** 数组转换Excel*/
function array2Sheet () {let data = [['姓名', '性别', '年龄'],['张三', '男', '18'],['李四', '女', '19'],['王二麻', '未知', '20']]// 实例化一个工作簿let book = XLSX.utils.book_new()// 实例化一个Sheetlet sheet = XLSX.utils.aoa_to_sheet(data)// 将Sheet写入工作簿XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')// 写入文件，直接触发浏览器的下载XLSX.writeFile(book, 'array2Sheet.xlsx')
}

简单解析示例

这里是针对 input:file 上传之后的结果进行解析的。

主要用到了两个方法：XLSX.read 和 XLSX.utils.sheet_to_aoa。

Demo 传送门

/*** JSON转换Excel*/
function parseExcel (fileDom) {let file = fileDom.files[0]let reader = new FileReader()let rABS = typeof FileReader !== "undefined" && (FileReader.prototype||{}).readAsBinaryStringif (rABS) {reader.readAsBinaryString(file)} else {reader.readAsArrayBuffer(file)}reader.onload = function(e) {let data = e.target.resultif (!rABS) {data = new Uint8Array(data)}let workBook = XLSX.read(data, {type: rABS ? 'binary' : 'array'})workBook.SheetNames.forEach(name => {let sheet = workBook.Sheets[name]let json = XLSX.utils.sheet_to_json(sheet, {raw: false,header: 1})// TODO 处理数据})}
}

最后

更多的功能还是要通过阅读官方的文档完成。

SheetJS生成/解析Excel相关推荐

Java基础系列19：使用JXL或者POI生成和解析Excel文件
一简介如题所示,当我们需要在Java中解析Excel文件时,可以考虑使用JXL或POI的API来解析. 二者的区别如下: jxl现在基本上没被维护了,最近一次更新时间还是几年前.相反,poi属于A ...
Unity编译器《策划表编表工具》 Excel转Json自动生成解析c#代码
Unity编译器 <策划表编表工具> Excel转Json自动生成解析c#代码 1.表格数据结构解释 2.Excel文件路径 3.C#代码与Json自动生成路径点击下载依赖Dll程序集 ...
SheetJS - XLS sheet_to_json() 方法解析 Excel 时不解析表格标题（表格第一行或N行）
前言官方文档:https://github.com/rockboom/SheetJS-docs-zh-CN 在 Vue 项目中,做 Excel(*.xls) 导入并预览表格功能时, 出现了表格第一行 ...
java代码使用http请求解压zip包并解析xml_Javascript 是如何解析 Excel 文件的？
最近要做一个导入导出 Excel 的功能,上一次做这个功能的时候,还是用的 Java Apache POI,这是一个用 Java 编写的免费开源的跨平台的 Java API,能够对 Microsoft ...
JavaScript纯前端解析Excel文件
最近在开发时候遇到了这样的一个需求:需要在前端通过解析Excel将Excel中的值进行回传填入.我想在实际的开发过程中,肯定大家也会遇到这样的需求,在这介绍一个比较不错的JS工具库:js-xlsx,及 ...
js-xlsx 使用总结实现前端解析excel
背景解析excel数据,前端或后端都可实现,考虑到当前需求为导入并且预览表格数据,用户可对数据进行修改,最终提交的为用户修改后的数据,所以采用前端解析的方式更为合理. 依赖项 1.js-xlsx库 ...
利用js-xlsx.js插件实现Excel文件导入并解析Excel数据成json数据格式
<!DOCTYPE html><html lang= ...
[转]VS2010+MFC解析Excel文件中数据
本文转自:http://www.vcfans.com/2010/08/vs2010-mfc-excel-file-in-the-data-analysis.html 前两天折腾一个小功能,需求是解析E ...
js前端解析excel文件
使用纯Javascript解析excel文件. 使用的是开源的解析excel的js库:sheetjs.github地址:https://github.com/SheetJS/js-xlsx 首先引用J ...

最新文章

热门文章