[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...