摘要：簡介是前端操作以及類似的二維表的最佳選擇之一而是它的社區(qū)版本將注意力集中到了數(shù)據(jù)轉(zhuǎn)換和導出上所以它支持相當多種類的數(shù)據(jù)解析和導出不僅僅局限于支持格式支持的導入格式支持的導出格式它可以解析符合格式的數(shù)據(jù)導出符合格式的數(shù)據(jù)利用中間層操作數(shù)據(jù)

SheetJS是前端操作Excel以及類似的二維表的最佳選擇之一,而js-xlsx是它的社區(qū)版本.

js-xlsx將注意力集中到了數(shù)據(jù)轉(zhuǎn)換和導出上,所以它支持相當多種類的數(shù)據(jù)解析和導出.不僅僅局限于支持xlsx格式.

支持的導入格式

支持的導出格式

它可以:

解析符合格式的數(shù)據(jù)

導出符合格式的數(shù)據(jù)

利用中間層操作數(shù)據(jù)

可以運行在:

瀏覽器端

Node端

純?yōu)g覽器端解析數(shù)據(jù)

純?yōu)g覽器端導出數(shù)據(jù)

讀寫文件

流式讀寫

本篇文章力求精簡,主要討論一下js-xlsx的工作流程和基本概念以及使用方式.

js-xlsx提供了一個中間層用于操作數(shù)據(jù),他將不同類型的文件抽象成同一個js對象,從而規(guī)避了操作不同種類數(shù)據(jù)數(shù)據(jù)之間的復雜性.

并且圍繞著這個對象提供了一系列的抽象功能,本小節(jié)主要討論這些數(shù)據(jù)對象與Excel數(shù)據(jù)之間的關(guān)系.

而瀏覽器端和Node端的區(qū)別僅僅在于怎樣導入文件和導出文件上而已,對于數(shù)據(jù)的操作,雙方的接口是一致的.

js-xlsx的引入非常簡單,瀏覽器端引入可以是最基本script標簽的形式.

在node端,使用npm安裝如下模塊:

npm install xlsx --save

在Node中如下引入:

const xlsx = require("xlsx");

詳細文檔地址

在這個表格中我列舉了Excel與js-xlsx之間的關(guān)系:

有了這個基本的對應關(guān)系我們就可以輕松的理解后續(xù)的操作,例如在我們使用Excel的過程中,獲取一個數(shù)據(jù)的流程如下:

打開工作簿

打開一個工作表

選中一片區(qū)域或者一個單元格

針對數(shù)據(jù)進行操作

保存(另存為)

那么在js-xlsx中獲取一個單元格內(nèi)容的操作如下:

// 先不要關(guān)心我們的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);// 獲取對應單元格中的數(shù)據(jù)

圖片:工作簿的數(shù)據(jù)結(jié)構(gòu)

一旦我們的Excel文件被解析那么這個Excel表中的所有內(nèi)容都會被解析上面的這個對象.而且這整個過程是同步完成的.

所以我們可以使用鍵的方式來直接獲取數(shù)據(jù),在上面的例子中我們就利用鍵一層層的向下獲取數(shù)據(jù).

上圖中常用的鍵一共有兩個:

SheetNames以字符串數(shù)組的形式保存了所有的工作表的名稱

Sheets下的內(nèi)容都是工作表對象,而鍵名就是SheetNames中包含的名字

而Excel的數(shù)據(jù)單位由小到大有如下排序如下:

單元格

工作表

工作簿

在Excel中單元格有多種格式,而js-xlsx會將其解析為對應的JavaScript的格式.

常見格式如下:

完整格式鏈接.

解析后單元格數(shù)據(jù)格式:

這個數(shù)據(jù)在Excel中保存在A1的位置上,文本類型,單元格內(nèi)容為xm.

js-xlsx使用有兩種方式來描述操作中的單元格區(qū)域.

一種是單元格地址對象(Cell address object)另外一種是地址范圍(Cell range).

地址對象格式如下:

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

上方地址對象對應的地址范圍如下:

const range = "A1:B2";

我們不難發(fā)現(xiàn)兩者之間對應的關(guān)系:

地址對象描述的是一個起始坐標(從0開始)到結(jié)束坐標之間的范圍.

地址范圍就是Excel中的引用樣式.

注意:這兩個概念會在工作表讀寫中使用到.

js-xlsx提供的接口非常清晰主要分為兩類:

xlsx對象本身提供的功能

解析數(shù)據(jù)

導出數(shù)據(jù)

utils工具類

將數(shù)據(jù)添加到數(shù)據(jù)表對象上

將二維數(shù)組以及符合格式的對象或者HTML轉(zhuǎn)為工作表對象

將工作簿轉(zhuǎn)為另外一種數(shù)據(jù)格式

行,列,范圍之間的轉(zhuǎn)碼和解碼

工作簿操作

單元格操作

這里提供一個簡單的Node例子(Node10+):

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

(async function (params) {
    
    // 獲取數(shù)據(jù)
    const excelBuffer = await readFile("./books.xlsx");
    
    // 解析數(shù)據(jù)
    const result = xlxs.read(excelBuffer,{
        type:"buffer",
        cellHTML:false,
    });
    
    console.log("TCL: result", result);

})();

還可以使用utils.book_new()創(chuàng)建一個新的工作簿對象:

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

const workBook= utils.book_new(); // 創(chuàng)建一個工作簿

然后使用跟多的工具來操作工作簿對象:

// 接著上面的例子

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

const workSheet = XLSX.utils.aoa_to_sheet(ws_data);// 使用二維數(shù)組創(chuàng)建一個工作表對象

utils.book_append_sheet(workBook,workSheet,"工作表名稱");// 向工作簿追加一個工作表

console.log(workBook);

詳細的解析文檔

詳細解析選項

工作表是實際存放數(shù)據(jù)的地方,在大部分情況下我們的操作都是對于工作表對象的操作.

js-xlsx提供了多種方式來操作數(shù)據(jù),這里提供最常見的幾種操作:

利用現(xiàn)有的數(shù)據(jù)結(jié)構(gòu)創(chuàng)建工作表

二維數(shù)組作為數(shù)據(jù)源

JSON作為數(shù)據(jù)源

修改工作表數(shù)據(jù)

二維數(shù)組作為數(shù)據(jù)源

JSON作為數(shù)據(jù)源

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

console.log(workSheet);

二維數(shù)組的關(guān)系非常容易理解,數(shù)組中的每一個數(shù)組代表一行.

圖片:二維數(shù)組結(jié)果

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開始增加內(nèi)容
});

console.log(workSheet);

圖片:二維數(shù)組結(jié)果

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開始增加內(nèi)容
    header: ["列1", "列2", "列3"],
    skipHeader: true// 跳過上面的標題行
});

console.log(workSheet);

圖片:JSON效果

詳細文檔地址

數(shù)據(jù)導出分為兩個部分:

利用工具類將工作簿對象轉(zhuǎn)為其他數(shù)據(jù)結(jié)構(gòu)

調(diào)用write或者writeFile方法

這里就不提供詳細的用例了,可以轉(zhuǎn)換的格式如下:

詳細文檔地址

這里提供一個簡單的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", // 輸出的數(shù)據(jù)類型
    compression:true // 開啟zip壓縮
});

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

write方法文檔以及輸出選項

支持的輸出文件格式

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

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