最近碰到個(gè)需要自動(dòng)生成表格的任務(wù)，作為前端的我，就想在 node 和瀏覽器中生成強(qiáng)大的表格，所以特此研究了很多關(guān)于表格的 npm 庫(kù)

支持讀寫(xiě) Excel 的 node.js 模塊

node-xlsx: 基于 Node.js 解析 excel 文件數(shù)據(jù)及生成 excel 文件，僅支持 xlsx 格式文件

js-xlsx: 目前 Github 上 star 數(shù)量最多的處理 Excel 的庫(kù)，支持解析多種格式表格 XLSX / XLSM / XLSB / XLS / CSV，解析采用純 js 實(shí)現(xiàn)，寫(xiě)入需要依賴 nodejs 或者 FileSaver.js 實(shí)現(xiàn)生成寫(xiě)入 Excel，可以生成子表 Excel，功能強(qiáng)大，但上手難度稍大。不提供基礎(chǔ)設(shè)置 Excel 表格 api 例單元格寬度，文檔有些亂，不適合快速上手；普通版本不支持定義字體、顏色、背景色等，有這個(gè)功能需要的可以使用 pro 版，是要聯(lián)系客服收費(fèi)的，害我照著 API 設(shè)置調(diào)試了好多次都失敗。好在樣式設(shè)置問(wèn)題有一些教程，通過(guò)研究本人已解決，可設(shè)置寬度顏色等等，見(jiàn)根目錄本人修改的 xlsx.js

xlsx-style 基于 xlsx 封裝的樣式庫(kù)，可以在 xlsx 的基礎(chǔ)上設(shè)置樣式。樣式不全，寬度都設(shè)置不了，好多年前作者就不維護(hù)了.寬度設(shè)置問(wèn)題本人已解決了，見(jiàn)修改的 xlsx-style.js 文件

exceljs 在使用此庫(kù)之前，本人已花費(fèi)了很大的精力，用以上庫(kù)做好了表格，但是發(fā)現(xiàn)不能設(shè)置頁(yè)眉頁(yè)腳，添加圖片，打印選項(xiàng)設(shè)置等等，直到發(fā)現(xiàn)了這個(gè)庫(kù)，文檔齊全，功能強(qiáng)大，并且還免費(fèi).但是star較少，差一點(diǎn)就錯(cuò)過(guò)了。本教程主要針對(duì)這個(gè)庫(kù)

代碼庫(kù)地址

https://github.com/lingxiaoyi/excel

安裝

npm install

npm install -g nodemon

調(diào)試使用，替代 node 命令，實(shí)現(xiàn)保存文件，node 自動(dòng)重新啟動(dòng)執(zhí)行，必須全局安裝才能運(yùn)行

使用

nodemon app.js

js-xlsx 具體 api 使用方法請(qǐng)參考 main.js demo 使用，app.js 中修改為 require('./src/main.js');

exceljs 具體 api 使用方法請(qǐng)參考 main-exceljs.js demo 使用，app.js 中修改為 require('./src/main-exceljs.js');

因?yàn)槊看紊赏瓯砀瘢看味夹枰蜷_(kāi)表格查看樣式，在 windows 電腦中，打開(kāi)表格之后就鎖定不能生成新文件了，本來(lái)想著能導(dǎo)出一個(gè) html 文件對(duì)應(yīng)表格的樣式

node 調(diào)試

vscode 中打開(kāi)調(diào)試右側(cè)設(shè)置編輯，將下方代碼復(fù)制進(jìn)去，點(diǎn) nodemon 啟動(dòng)就可以進(jìn)行 debug 調(diào)試了

{

     "type": "node"，

     "request": "launch"，

     "name": "nodemon"，

     "runtimeExecutable": "nodemon"，

     "program": "${workspaceFolder}/app.js"，

     "restart": true，

     "console": "integratedTerminal"，

     "internalConsoleOptions": "neverOpen"，

     "skipFiles": ["<node_internals>/**"]

   }，

webpack 目錄的作用

每次生成完新表格，都需要重新打開(kāi)表格查看樣式，在 windows 電腦中，打開(kāi)表格之后就鎖定了，再次生成新表格就會(huì)報(bào)錯(cuò)，文件已鎖定，不能寫(xiě)入，對(duì)于想偷懶的我，能不能實(shí)現(xiàn)像 webpack 熱更新功能那種，修改樣式 js 頁(yè)面自動(dòng)更新呢?

wps 自帶另存 html 文件功能，但是沒(méi)有提供生成的 api ，網(wǎng)上也搜索不到對(duì)應(yīng)的轉(zhuǎn)換功能，

本來(lái)以為自己要實(shí)現(xiàn)一套表格轉(zhuǎn) html 的功能。通過(guò)不斷嘗試，偶然間發(fā)現(xiàn)手機(jī)瀏覽器可以直接打開(kāi)預(yù)覽 xlsx 文件，內(nèi)心狂喜啊

使用方法

進(jìn)入 webpack 目錄安裝依賴包，安裝好之后執(zhí)行

npm run dev

啟動(dòng)成功之后，會(huì)自動(dòng)打開(kāi)帶有 ip 地址的預(yù)覽地址，此時(shí)在電腦瀏覽器會(huì)自動(dòng)下載 xlsx 文件，忽略不管，用手機(jī)直接打開(kāi)此地址，就能看到 xlsx 表格的內(nèi)容了，并且每次新修改內(nèi)容和樣式，都會(huì)自動(dòng)刷新頁(yè)面顯示新表格.

小技巧

谷歌瀏覽器插件:

生成二維碼的插件生成二維碼方便手機(jī)掃描

劃詞翻譯 用來(lái)翻譯一些看不懂的英文文檔

browser 目錄

瀏覽器中實(shí)現(xiàn)生成 xlsx 表格方法

進(jìn)入 browser 目錄安裝依賴包，安裝好之后執(zhí)行

npm run dev

啟動(dòng)成功之后，拖動(dòng)根目錄 src 下的李四表格到頁(yè)面上的輸入框里，成功生成表格之后會(huì)生成一個(gè)下載鏈接地址，右鍵在新標(biāo)簽頁(yè)打開(kāi)鏈接，即會(huì)生成一個(gè)新的表格文件出來(lái)，完整 api 使用和 demo 文件請(qǐng)參考 index.js

vue 和 react 用法可以參考此例子，如果有必要也可以此版本庫(kù)的例子

一些概念

在使用這個(gè)庫(kù)之前，先介紹庫(kù)中的一些概念。

workbook 對(duì)象，指的是整份 Excel 文檔。我們?cè)谑褂?js-xlsx 讀取 Excel 文檔之后就會(huì)獲得 workbook 對(duì)象。

worksheet 對(duì)象，指的是 Excel 文檔中的表。我們知道一份 Excel 文檔中可以包含很多張表，而每張表對(duì)應(yīng)的就是 worksheet 對(duì)象。

cell 對(duì)象，指的就是 worksheet 中的單元格，一個(gè)單元格就是一個(gè) cell 對(duì)象。

xlsx 使用注意事項(xiàng)

constXLSX = require('xlsx');

let html = XLSX.utils.sheet_to_html(workbook.Sheets.Sheet1)

生成 html 的用法，并且不會(huì)有任何樣式

exceljs 使用注意

讀取文件問(wèn)題

因?yàn)?exceljs 讀取文件不支持 sync 同步讀取，給的實(shí)例也是 await 例子.導(dǎo)致我讀取完遇到一個(gè)問(wèn)題，就是老是生成不成功，最后發(fā)現(xiàn)必須要把所有邏輯全部放入函數(shù)中，像下方這樣

(async function (params) {

 let res = await workbook.xlsx.readFile(`${__dirname}/趙六.xlsx`);

 //執(zhí)行所有數(shù)據(jù)處理邏輯

 //執(zhí)行寫(xiě)的邏輯

 workbook.xlsx.writeFile(path.resolve(__dirname， '../webpack/test222.xlsx'));

});

所有邏輯全部要寫(xiě)入這個(gè)函數(shù)中，這樣本來(lái)是可以的，但是出錯(cuò)調(diào)試幾率較大，并且讀取到的數(shù)據(jù)龐大還需要額外處理，所以我讀取數(shù)據(jù)邏輯就用的 node-xlsx，十分簡(jiǎn)單方便，如果你用的 exceljs 讀取文件數(shù)據(jù)出現(xiàn)問(wèn)題，大概率是異步同步邏輯搞錯(cuò)了，多加注意即可

寬度設(shè)置

列寬不知道是以什么為單位，反正不是像素(已測(cè)量)，例子中是以厘米為單位再乘以 4.7 的結(jié)果設(shè)置的，4.7 是不斷測(cè)試的結(jié)果.

快捷查看列寬的方法，打開(kāi) wps 表格，長(zhǎng)按列與列字母間的豎線，就能看到列寬，取厘米的單位即可.見(jiàn)下圖

前景色

前景色設(shè)置必須右鍵單元格選擇設(shè)置單元格格式，然后選擇圖案樣式選擇顏色，就可以前景色填充

worksheet.getCell('A2').fill = { type: 'pattern'， pattern:'darkTrellis'， fgColor:{argb:'FFFFFF00'}， bgColor:{argb:'FF0000FF'} };

背景色

worksheet.getCell('A2').fill = { type: "pattern"， pattern: "solid"， fgColor: { argb: next.bgColor }， }

排版不一致的問(wèn)題

解決 Mac 下編輯 Microsoft Office Word 文檔與 Windows 排版不一致的問(wèn)題，，不同的系統(tǒng)用 wps 打開(kāi)相同的表格，打印預(yù)覽的時(shí)候，表格寬度顯示不一樣

問(wèn)題詳細(xì)說(shuō)明地址

我的解決辦法就是 mac 下顯示正常，按 mac 下的寬度來(lái)設(shè)置就可以了

參考資料

exceljs

node-xlsx

js-xlsx