js-xlsx使用-解析生成xlsx文件

1.js-xlsx 介绍

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

官方github：https://github.com/SheetJS/js-xlsx

本文配套demo在线演示地址：http://demo.haoji.me/2017/02/08-js-xlsx/

本文同步首发于我的个人博客和博客园。

1.1. 兼容性

兼容性如下图：

1.2. 如何使用

dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能模块。

直接script标签引入即可：

读取excel

读取excel主要是通过XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象，type主要取值如下：

base64: 以base64方式读取；

binary: BinaryString格式(byte n is data.charCodeAt(n))

string: UTF8编码的字符串；

buffer: nodejs Buffer；

array: Uint8Array，8位无符号数组；

file: 文件的路径（仅nodejs下支持）；

2.1. 获取workbook对象

2.1.1. 读取本地文件

直接上代码：

// 读取本地excel文件functionreadWorkbookFromLocalFile(file, callback){varreader =newFileReader(); reader.onload =function(e){vardata = e.target.result;varworkbook = XLSX.read(data, {type:'binary'});if(callback) callback(workbook); }; reader.readAsBinaryString(file);}

2.1.2. 读取网络文件

// 从网络上读取某个excel文件，url必须同域，否则报错functionreadWorkbookFromRemoteFile(url, callback){varxhr =newXMLHttpRequest(); xhr.open('get', url,true); xhr.responseType ='arraybuffer'; xhr.onload =function(e){if(xhr.status ==200) {vardata =newUint8Array(xhr.response)varworkbook = XLSX.read(data, {type:'array'});if(callback) callback(workbook); } }; xhr.send();}

2.2. 详解 workbook

2.2.1. Workbook Object

workbook里面有什么东西呢，我们打印出来看一下：

可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）：

2.2.2. Sheet Object

每一个Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下：

sheet['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8；

sheet[!merges]：存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列；

等等；

关于单元格合并，看懂下面这张图基本上就没问题了：

结果如下：

2.2.3. 单元格对象

每一个单元格是一个对象（Cell Object），主要有t、v、r、h、w等字段（详见这里）：

t：表示内容类型，s表示string类型，n表示number类型，b表示boolean类型，d表示date类型，等等

v：表示原始值；

f：表示公式，如B2+B3；

h：HTML内容

w：格式化后的内容

r：富文本内容rich text

等等

2.2.4. 读取workbook

普通方法：

// 读取 excel文件functionoutputWorkbook(workbook){varsheetNames = workbook.SheetNames;// 工作表名称集合sheetNames.forEach(name=>{varworksheet = workbook.Sheets[name];// 只能通过工作表名称来获取指定工作表for(varkeyinworksheet) {// v是读取单元格的原始值console.log(key, key[0] ==='!'? worksheet[key] : worksheet[key].v); } });}

根据!ref确定excel的范围，再根据!merges确定单元格合并（如果有），最后输出整个table，比较麻烦，幸运的是，插件自身已经写好工具类XLSX.utils给我们直接使用，无需我们自己遍历，工具类输出主要包括如下：

有些不常用，常用的主要是：

XLSX.utils.sheet_to_csv：生成CSV格式

XLSX.utils.sheet_to_txt：生成纯文本格式

XLSX.utils.sheet_to_html：生成HTML格式

XLSX.utils.sheet_to_json：输出JSON格式

常用的主要是sheet_to_csv或者sheet_to_html，转csv的话会忽略格式、单元格合并等信息，所以复杂表格可能不适用。转html的话会保留单元格合并，但是生成的是<html></html>代码，而不是<table></table>，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。

这里写一个采用转csv方式输出结果的简单示例，可点击这里查看在线DEMO：

functionreadWorkbook(workbook){varsheetNames = workbook.SheetNames;// 工作表名称集合varworksheet = workbook.Sheets[sheetNames[0]];// 这里我们只读取第一张sheetvarcsv = XLSX.utils.sheet_to_csv(worksheet);document.getElementById('result').innerHTML = csv2table(csv);}// 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引functioncsv2table(csv){varhtml ='<table>';varrows = csv.split('\n'); rows.pop();// 最后一行没用的rows.forEach(function(row, idx){varcolumns = row.split(','); columns.unshift(idx+1);// 添加行索引if(idx ==0) {// 添加列索引html +='<tr>';for(vari=0; i

导出excel

导出分为2种，一种是基于现有excel修改，一种是全新生成，前者比较简单，我们这里着重讲后者。

3.1. 自己手写代码生成

导出excel文件，主要是如何生成一个sheet，我们这里写一个最简单的csv转excel示例：

// csv转sheet对象functioncsv2sheet(csv){varsheet = {};// 将要生成的sheetcsv = csv.split('\n'); csv.forEach(function(row, i){ row = row.split(',');if(i ==0) sheet['!ref'] ='A1:'+String.fromCharCode(65+row.length-1)+(csv.length-1); row.forEach(function(col, j){ sheet[String.fromCharCode(65+j)+(i+1)] = {v: col}; }); });returnsheet;}// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载functionsheet2blob(sheet, sheetName){ sheetName = sheetName ||'sheet1';varworkbook = {SheetNames: [sheetName],Sheets: {} }; workbook.Sheets[sheetName] = sheet;// 生成excel的配置项varwopts = {bookType:'xlsx',// 要生成的文件类型bookSST:false,// 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type:'binary'};varwbout = XLSX.write(workbook, wopts);varblob =newBlob([s2ab(wbout)], {type:"application/octet-stream"});// 字符串转ArrayBufferfunctions2ab(s){varbuf =newArrayBuffer(s.length);varview =newUint8Array(buf);for(vari=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) &0xFF;returnbuf; }returnblob;}

拿到上面的blob对象就可以直接下载了，参考我之前在JS弹出下载对话框里面封装好的openDownloadDialog方法：

/**

* 通用的打开下载对话框方法，没有测试过具体兼容性

* @param url 下载地址，也可以是一个blob对象，必选

* @param saveName 保存文件名，可选

*/functionopenDownloadDialog(url, saveName){if(typeofurl =='object'&& urlinstanceofBlob) { url = URL.createObjectURL(url);// 创建blob地址}varaLink =document.createElement('a'); aLink.href = url; aLink.download = saveName ||'';// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效varevent;if(window.MouseEvent) event =newMouseEvent('click');else{ event =document.createEvent('MouseEvents'); event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null); } aLink.dispatchEvent(event);}

所以，最终下载实现如下：

// 传入csv，执行后就会弹出下载框functionexportExcel(csv){varsheet = csv2sheet(csv);varblob = sheet2blob(sheet); openDownloadDialog(blob,'导出.xlsx')；}

3.2. 利用官方工具类生成

其实上面这些代码都不需要我们手写，官方已经提供好了现成的工具类给我们使用，主要包括：

aoa_to_sheet: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；

table_to_sheet: 将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；

json_to_sheet: 将一个由对象组成的数组转成sheet；

aoa_to_sheet示例：

varaoa = [ ['姓名','性别','年龄','注册时间'], ['张三','男',18,newDate()], ['李四','女',22,newDate()]];varsheet = XLSX.utils.aoa_to_sheet(aoa);openDownloadDialog(sheet2blob(sheet),'导出.xlsx');

table_to_sheet就更简单了，直接XLSX.utils.table_to_sheet($('table')[0])即可；

3.3. 处理单元格合并

一般来说，前端生成excel而不是csv最主要目的都是为了解决csv不能实现单元格合并的问题，要不然直接导出csv文件就好了，何必引入几百kb的插件。

假设我们要生成如下格式的excel文件，其中A1-C1进行单元格合并：

代码如下：

varaoa = [ ['主要信息',null,null,'其它信息'],// 特别注意合并的地方后面预留2个null['姓名','性别','年龄','注册时间'], ['张三','男',18,newDate()], ['李四','女',22,newDate()]];varsheet = XLSX.utils.aoa_to_sheet(aoa);sheet['!merges'] = [// 设置A1-C1的单元格合并{s: {r:0,c:0},e: {r:0,c:2}}];openDownloadDialog(sheet2blob(sheet),'单元格合并示例.xlsx');

需要注意的地方就是被合并的单元格要用null预留出位置，否则后面的内容（本例中是第四列其它信息）会被覆盖。

3.4. 自定义样式

普通版本不支持定义字体、颜色、背景色等，有这个功能需要的可以使用pro版，好像是要收费的，因为官网没看到下载地址。

作者：Jiao_0805
链接：https://www.jianshu.com/p/31534691ed53
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

js-xlsx使用-解析生成xlsx文件相关推荐

vue或js解析文件excel表格js通过插件解析表格读取文件
安装插件 cnpm i xlsx --save-dev cnpm i jquery --save-dev 引入插件 html引入文件 <input type="file" i ...
puppeteer api_使用Node.js和Puppeteer API生成PDF文件
puppeteer api Puppeteer is a Node library developed by Google and provides a high-level API for deve ...
python生成excel文件的三种方式
在我们做平常工作中都会遇到操作excel,那么今天写一篇,如何通过python操作excel.当然python操作excel的库有很多,比如pandas,xlwt/xlrd,openpyxl等,每个库 ...
python解析dat文件生成xlsx文件
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 python解析dat文件生成xlsx文件提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 ...
js导出的xlsx无法打开_js-xlsx实现文件导出、下载（excel）
记录一下近期使用js-xlsx的一些经验真正的.xls\.xlsx文件,就算是空白的其实是包含了一些内容的所以并不能直接像写入txt一样直接搞一个file往里面把数据写入就完了现在网上查得到导出 ...
node 根据xlsx表格数据，批量生成表格文件，并且设置样式和行高
假如我们有这么一个数据的表格文件任务目标就是根据数据1的字段相同的每条的数据,去生成一个表格文件(数据1的值为1的全放一个表格文件里,数据1的值为2的放下一个文件里,以此类推) 下面先来进行准备 ...
electron中使用adm-zip将多个excel文件压缩进文件夹，使用XLSX以及XLSXStyle生成带样式excel文件
需求:electron环境下想要实现根据多个表生成多个Excel文件,打包存入文件夹内并压缩下载到本地.(实际场景描述:界面中有软件工程一班学生信息.软件工程二班学生信息.软件工程三班学生信息,上方有 ...
python的openpyxl模块下载_python解析.xls/.xlsx文件–openpyxl模块（第三方）
围观人数: 7 标签:book set tle 命令行文件中不能 charm 读取 pen 第一part:Excel文件的介绍 Microsoft Excel是Mi ...
Qt: Linux下生成.xlsx文件（excel表格文件）
Qt开发,项目中有个功能是要将数据导出至excel文件,也就是.xlsx或.wps格式文件. 查询一番,需要用到一个库 Qt Xlsx,方法如下: 1. 下载源码: GitHub - dbzhang8 ...
后端使用nodejs生成xlsx文件数据流，并返回给前端直接进行下载
本文教您如何不将文件存储在后端,使用nodejs返回文件流给前端直接进行下载 1,后端安装node-xlsx npm install node-xlsx -S 2,node生成xlsx文件buff ...

js-xlsx使用-解析生成xlsx文件

js-xlsx使用-解析生成xlsx文件相关推荐

最新文章

热门文章