简介

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的历程当中,猎取一个数据的流程以下:

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的花样.

罕见花样以下:

完全花样链接.

剖析后单元格数据花样:

这个数据在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…