[SheetJS] js-xlsx模块学习指南

简介

SheetJS是前端操做Excel以及相似的二维表的最佳选择之一,而js-xlsx是它的社区版本.

js-xlsx将注意力集中到了数据转换和导出上,因此它支持至关多种类的数据解析和导出.不单单局限于支持xlsx格式.

支持的导入格式

支持的导出格式

它能够:

• 解析符合格式的数据
• 导出符合格式的数据
• 利用中间层操做数据

能够运行在:

• 浏览器端
• Node端

浏览器端特点

• 纯浏览器端解析数据
• 纯浏览器端导出数据

Node端特点

• 读写文件
• 流式读写

本篇文章力求精简,主要讨论一下js-xlsx的工做流程和基本概念以及使用方式.

概念

js-xlsx提供了一个中间层用于操做数据,他将不一样类型的文件抽象成同一个js对象,从而规避了操做不一样种类数据数据之间的复杂性.

而且围绕着这个对象提供了一系列的抽象功能,本小节主要讨论这些数据对象与Excel数据之间的关系.

而浏览器端和Node端的区别仅仅在于怎样导入文件和导出文件上而已,对于数据的操做,双方的接口是一致的.

引入

js-xlsx的引入很是简单,浏览器端引入能够是最基本script标签的形式.

<script lang="javascript" src="dist/xlsx.full.min.js"></script>

在node端,使用npm安装以下模块:

npm install xlsx --save

在Node中以下引入:

const xlsx = require('xlsx');

详细文档地址

对应关系

在这个表格中我列举了Excel与js-xlsx之间的关系:

Excel名词	js-xlsx中的抽象类型
工做簿	workBook
工做表	Sheets
Excel引用样式(单元格地址)	cellAddress
单元格	cell

有了这个基本的对应关系咱们就能够轻松的理解后续的操做,例如在咱们使用Excel的过程当中,获取一个数据的流程以下:

1. 打开工做簿
2. 打开一个工做表
3. 选中一片区域或者一个单元格
4. 针对数据进行操做
5. 保存(另存为)

那么在js-xlsx中获取一个单元格内容的操做以下:

// 先不要关心咱们的workbook对象是从哪里来的
var first_sheet_name = workbook.SheetNames[0]; // 获取工做簿中的工做表名字
var address_of_cell = 'A1'; // 提供一个引用样式(单元格下标)

var worksheet = workbook.Sheets[first_sheet_name]; // 获取对应的工做表对象

var desired_cell = worksheet[address_of_cell]; // 获取对应的单元格对象

var desired_value = (desired_cell ? desired_cell.v : undefined);// 获取对应单元格中的数据

数据格式

图片:工做簿的数据结构

一旦咱们的Excel文件被解析那么这个Excel表中的全部内容都会被解析上面的这个对象.并且这整个过程是同步完成的.

因此咱们可使用键的方式来直接获取数据,在上面的例子中咱们就利用键一层层的向下获取数据.

上图中经常使用的键一共有两个:

• SheetNames以字符串数组的形式保存了全部的工做表的名称
• Sheets下的内容都是工做表对象,而键名就是SheetNames中包含的名字

而Excel的数据单位由小到大有以下排序以下:

• 单元格
• 工做表
• 工做簿

单元格格式

在Excel中单元格有多种格式,而js-xlsx会将其解析为对应的JavaScript的格式.

常见格式以下:

键	描述
v	源数据(未经处理的数据)
w	格式化后的文本(若是可以被格式化)
t	单元格类型(具体类型请看下方的表格)
r	解码后的富文本(若是能够被解码)
h	渲染成HTML格式的富文本(若是能够被解码)
c	单元格注释
z	格式化成字符串的数值(若是须要的话)

完整格式连接.

解析后单元格数据格式:

这个数据在Excel中保存在A1的位置上,文本类型,单元格内容为xm.

单元格地址

js-xlsx使用有两种方式来描述操做中的单元格区域.

一种是单元格地址对象(Cell address object)另一种是地址范围(Cell range).

地址对象格式以下:

const start = { c: 0, r: 0 };
const end = { c: 1, r: 1 };

上方地址对象对应的地址范围以下:

const range = 'A1:B2';

咱们不难发现二者之间对应的关系:

• 地址对象描述的是一个起始坐标(从0开始)到结束坐标之间的范围.
• 地址范围就是Excel中的引用样式.

注意:这两个概念会在工做表读写中使用到.

API

js-xlsx提供的接口很是清晰主要分为两类:

• xlsx对象自己提供的功能

  • 解析数据
  • 导出数据

• utils工具类

  • 将数据添加到数据表对象上
  • 将二维数组以及符合格式的对象或者HTML转为工做表对象
  • 将工做簿转为另一种数据格式
  • 行,列,范围之间的转码和解码
  • 工做簿操做
  • 单元格操做

读取数据并解析

这里提供一个简单的Node例子(Node10+):

const xlxs = require('xlsx');
const {readFile} = require('fs').promises;

(async function (params) {
    
    // 获取数据
    const excelBuffer = await readFile('./books.xlsx');
    
    // 解析数据
    const result = xlxs.read(excelBuffer,{
        type:'buffer',
        cellHTML:false,
    });
    
    console.log('TCL: result', result);

})();

还可使用utils.book_new()建立一个新的工做簿对象:

const
    xlsx = require('xlsx'),
    { utils } = xlsx;

const workBook= utils.book_new(); // 建立一个工做簿

而后使用跟多的工具来操做工做簿对象:

// 接着上面的例子

const ws_data = [
  [ "S", "h", "e", "e", "t", "J", "S" ],
  [  1 ,  2 ,  3 ,  4 ,  5 ]
];

const workSheet = XLSX.utils.aoa_to_sheet(ws_data);// 使用二维数组建立一个工做表对象

utils.book_append_sheet(workBook,workSheet,'工做表名称');// 向工做簿追加一个工做表

console.log(workBook);

详细的解析文档

详细解析选项

数据填充

工做表是实际存放数据的地方,在大部分状况下咱们的操做都是对于工做表对象的操做.

js-xlsx提供了多种方式来操做数据,这里提供最多见的几种操做:

• 利用现有的数据结构建立工做表

  • 二维数组做为数据源
  • JSON做为数据源

• 修改工做表数据

  • 二维数组做为数据源
  • JSON做为数据源

建立工做表

const workSheet = utils.aoa_to_sheet([[1,2,3,new Date()],[1,2,,4]],{
    sheetStubs:false,
    cellStyles:false,
    cellDates:true // 解析为原生时间
});

console.log(workSheet);

二维数组的关系很是容易理解,数组中的每个数组表明一行.

图片:二维数组结果

const workSheet = 
utils.json_to_sheet([
{ '列1': 1, '列2': 2, '列3': 3 },
{ '列1': 4, '列2': 5, '列3': 6 }
],{
    header:['列1','列2','列3'],
    skipHeader:true// 跳过上面的标题行
})

console.log(workSheet);

图片:JSON效果

详细文档地址

修改数据表数据

const workSheet = 
utils.json_to_sheet([
{ '列1': 1, '列2': 2, '列3': 3 },
{ '列1': 4, '列2': 5, '列3': 6 }
],{
    header:['列1','列2','列3'],
    skipHeader:true// 跳过上面的标题行
})

utils.sheet_add_aoa(workSheet,[
    [7,8,9],
    ['A','B','C']
],{
    origin:'A1' // 从A1开始增长内容
});

console.log(workSheet);

图片:二维数组结果

const workSheet = 
utils.json_to_sheet([
{ '列1': 1, '列2': 2, '列3': 3 },
{ '列1': 4, '列2': 5, '列3': 6 }
],{
    header:['列1','列2','列3'],
    skipHeader:true// 跳过上面的标题行
})

utils.sheet_add_json(workSheet,[
    { '列1': 7, '列2': 8, '列3': 9 },
    { '列1': 'A', '列2': 'B', '列3': 'C' }
],{
    origin:'A1',// 从A1开始增长内容
    header: ['列1', '列2', '列3'],
    skipHeader: true// 跳过上面的标题行
});

console.log(workSheet);

图片:JSON效果

详细文档地址

数据导出

数据导出分为两个部分:

• 利用工具类将工做簿对象转为其余数据结构
• 调用write或者writeFile方法

转换为其余的数据结构

这里就不提供详细的用例了,能够转换的格式以下:

详细文档地址

输出文件

这里提供一个简单的Node例子(Node10+):

const
    xlsx = require('xlsx'),
    { utils } = xlsx;

const {writeFile} =require('fs').promises;

const workBook= utils.book_new();
const workSheet = utils.aoa_to_sheet([[1,2,3]],{
    cellDates:true,
});

// 向工做簿中追加工做表
utils.book_append_sheet(workBook, workSheet,'helloWorld');

// 浏览器端和node共有的API,实际上node能够直接使用xlsx.writeFile来写入文件,可是浏览器没有该API
const result = xlsx.write(workBook, {
    bookType: 'xlsx', // 输出的文件类型
    type: 'buffer', // 输出的数据类型
    compression:true // 开启zip压缩
});

// 写入文件
writeFile('./hello.xlsx',result)
.catch((error)=>{
    console.log(error);
});

write方法文档以及输出选项

支持的输出文件格式

有关js-xlsx的其余优秀文章

https://www.cnblogs.com/liuxi...

引用

https://github.com/SheetJS/js...