[SheetJS] js-xlsx module study guides

Brief introduction

SheetJS is one of the best front-end operations Excel and similar two-dimensional table, and js-xlsxits community version.

js-xlsxTo focus on conversion and export data, so it supports quite a range of data analysis and export. Not only limited support xlsx format.

Supported import formats

Supported export formats

it can:

• Parsing compliant data format
• Export compliance with data format
• Using the operational data of the intermediate layer

You can run:

• Browser
• Node end

Browser features

• Pure browser parses data
• Pure browser-export data

Node end features

• Reading and Writing Files
• Streaming reader

This article seeks to streamline, mainly to discuss the js-xlsxworkflow and the basic concepts and usage.

concept

js-xlsxProviding an intermediate layer for operating the data, he different types of files into the same abstraction js objects, thus avoiding the complexity of the operation between different data types.

And provides a series of abstractions around this object, this section focuses on the relationship between these data objects with the Excel data.

The difference between the browser and Node end lies solely on how to import files and export files only, for the operation of the data, the two sides of the interface is the same.

Introduced

js-xlsxThe introduction is very simple, the browser can be introduced into the most basic scriptform of labels.

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

In end node, npm installation using the following modules:

npm install xlsx --save

Incorporated in the Node follows:

const xlsx = require('xlsx');

Detailed documentation Address

Correspondence between

In this table I have listed and Excel js-xlsxrelationship between:

Excel nouns	js-xlsx abstract type
work log	workBook
Worksheet	Sheets
Excel reference style (cell address)	cellAddress
Cell	cell

With this basic correspondence relationship we can easily understand the subsequent operation, for example, we used Excel in the process of obtaining a flow of data is as follows:

1. Open the workbook
2. Open a worksheet
3. Select a region or a cell
4. Operates on the data
5. Save (Save As)

Then js-xlsxacquiring the content of a cell as follows :

// 先不要关心我们的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);// 获取对应单元格中的数据

Data Format

Photo: workbook data structure

一旦我们的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转为工作表对象
  • The workbook into another data format
  • Transcoding and decoding between the rows, columns, range
  • Workbook operation
  • Cell Operation

Read and parse the data

Here a simple example 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); })();

You can also be used utils.book_new()to create a new workbook object:

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

const workBook= utils.book_new(); // 创建一个工作簿

Then use the tool to operate with multi-workbook object:

// 接着上面的例子

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);

Detailed analysis document

Detailed analysis options

Data filling

Worksheet is where the actual storage of data, our operations are subject to the worksheet operations in most cases.

js-xlsxProvides several ways to manipulate data, here are the most common types of operations:

• Create a worksheet using the existing data structure

  • Two-dimensional array as a data source
  • JSON as a data source

• Modify worksheet data

  • Two-dimensional array as a data source
  • JSON as a data source

Create Worksheet

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

The relationship between the two-dimensional array is very easy to understand, each array represents one row in the array.

Picture: two-dimensional array results

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);

Picture: JSON results

Detailed documentation Address

Modify Data Sheet Data

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);

Picture: two-dimensional array results

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);

Picture: JSON results

Detailed documentation Address

Data output

Export data is divided into two parts:

• The use of tools workbook object into other data structures
• Call writeor writeFilemethod

Is converted into another data structure

Does not provide detailed use cases here, it can be converted to the following format:

Detailed documentation Address

Output file

Here a simple example 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 method of document and output options

Supported output file formats

For additional js-xlsx's excellent article

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

Quote

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