2020-5-1 seo達(dá)人
最近碰到個需要自動生成表格的任務(wù)，作為前端的我，就想在 node 和瀏覽器中生成強(qiáng)大的表格，所以特此研究了很多關(guān)于表格的 npm 庫
支持讀寫 Excel 的 node.js 模塊
node-xlsx: 基于 Node.js 解析 excel 文件數(shù)據(jù)及生成 excel 文件，僅支持 xlsx 格式文件
js-xlsx: 目前 Github 上 star 數(shù)量最多的處理 Excel 的庫，支持解析多種格式表格 XLSX / XLSM / XLSB / XLS / CSV，解析采用純 js 實現(xiàn)，寫入需要依賴 nodejs 或者 FileSaver.js 實現(xiàn)生成寫入 Excel，可以生成子表 Excel，功能強(qiáng)大，但上手難度稍大。不提供基礎(chǔ)設(shè)置 Excel 表格 api 例單元格寬度，文檔有些亂，不適合快速上手；普通版本不支持定義字體、顏色、背景色等，有這個功能需要的可以使用 pro 版，是要聯(lián)系客服收費的，害我照著 API 設(shè)置調(diào)試了好多次都失敗。好在樣式設(shè)置問題有一些教程，通過研究本人已解決，可設(shè)置寬度顏色等等，見根目錄本人修改的 xlsx.js
xlsx-style 基于 xlsx 封裝的樣式庫，可以在 xlsx 的基礎(chǔ)上設(shè)置樣式。樣式不全，寬度都設(shè)置不了，好多年前作者就不維護(hù)了.寬度設(shè)置問題本人已解決了，見修改的 xlsx-style.js 文件
exceljs 在使用此庫之前，本人已花費了很大的精力，用以上庫做好了表格，但是發(fā)現(xiàn)不能設(shè)置頁眉頁腳，添加圖片，打印選項設(shè)置等等，直到發(fā)現(xiàn)了這個庫，文檔齊全，功能強(qiáng)大，并且還免費.但是star較少，差一點就錯過了。本教程主要針對這個庫
代碼庫地址
https://github.com/lingxiaoyi/excel
安裝
npm install
npm install -g nodemon
調(diào)試使用，替代 node 命令，實現(xiàn)保存文件，node 自動重新啟動執(zhí)行，必須全局安裝才能運行
使用
nodemon app.js
js-xlsx 具體 api 使用方法請參考 main.js demo 使用，app.js 中修改為 require('./src/main.js');
exceljs 具體 api 使用方法請參考 main-exceljs.js demo 使用，app.js 中修改為 require('./src/main-exceljs.js');
因為每次生成完表格，每次都需要打開表格查看樣式，在 windows 電腦中，打開表格之后就鎖定不能生成新文件了，本來想著能導(dǎo)出一個 html 文件對應(yīng)表格的樣式
node 調(diào)試
vscode 中打開調(diào)試右側(cè)設(shè)置編輯，將下方代碼復(fù)制進(jìn)去，點 nodemon 啟動就可以進(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 目錄的作用
每次生成完新表格，都需要重新打開表格查看樣式，在 windows 電腦中，打開表格之后就鎖定了，再次生成新表格就會報錯，文件已鎖定，不能寫入，對于想偷懶的我，能不能實現(xiàn)像 webpack 熱更新功能那種，修改樣式 js 頁面自動更新呢?
wps 自帶另存 html 文件功能，但是沒有提供生成的 api ，網(wǎng)上也搜索不到對應(yīng)的轉(zhuǎn)換功能，
本來以為自己要實現(xiàn)一套表格轉(zhuǎn) html 的功能。通過不斷嘗試，偶然間發(fā)現(xiàn)手機(jī)瀏覽器可以直接打開預(yù)覽 xlsx 文件，內(nèi)心狂喜啊
使用方法
進(jìn)入 webpack 目錄安裝依賴包，安裝好之后執(zhí)行
npm run dev
啟動成功之后，會自動打開帶有 ip 地址的預(yù)覽地址，此時在電腦瀏覽器會自動下載 xlsx 文件，忽略不管，用手機(jī)直接打開此地址，就能看到 xlsx 表格的內(nèi)容了，并且每次新修改內(nèi)容和樣式，都會自動刷新頁面顯示新表格.
小技巧
谷歌瀏覽器插件:
生成二維碼的插件生成二維碼方便手機(jī)掃描
劃詞翻譯 用來翻譯一些看不懂的英文文檔
browser 目錄
瀏覽器中實現(xiàn)生成 xlsx 表格方法
進(jìn)入 browser 目錄安裝依賴包，安裝好之后執(zhí)行
npm run dev
啟動成功之后，拖動根目錄 src 下的李四表格到頁面上的輸入框里，成功生成表格之后會生成一個下載鏈接地址，右鍵在新標(biāo)簽頁打開鏈接，即會生成一個新的表格文件出來，完整 api 使用和 demo 文件請參考 index.js
vue 和 react 用法可以參考此例子，如果有必要也可以此版本庫的例子
一些概念
在使用這個庫之前，先介紹庫中的一些概念。
workbook 對象，指的是整份 Excel 文檔。我們在使用 js-xlsx 讀取 Excel 文檔之后就會獲得 workbook 對象。
worksheet 對象，指的是 Excel 文檔中的表。我們知道一份 Excel 文檔中可以包含很多張表，而每張表對應(yīng)的就是 worksheet 對象。
cell 對象，指的就是 worksheet 中的單元格，一個單元格就是一個 cell 對象。
xlsx 使用注意事項
constXLSX = require('xlsx');
let html = XLSX.utils.sheet_to_html(workbook.Sheets.Sheet1)
生成 html 的用法，并且不會有任何樣式
exceljs 使用注意
讀取文件問題
因為 exceljs 讀取文件不支持 sync 同步讀取，給的實例也是 await 例子.導(dǎo)致我讀取完遇到一個問題，就是老是生成不成功，最后發(fā)現(xiàn)必須要把所有邏輯全部放入函數(shù)中，像下方這樣
(async function (params) {
let res = await workbook.xlsx.readFile(`${__dirname}/趙六.xlsx`);
//執(zhí)行所有數(shù)據(jù)處理邏輯
//執(zhí)行寫的邏輯
workbook.xlsx.writeFile(path.resolve(__dirname， '../webpack/test222.xlsx'));
});
所有邏輯全部要寫入這個函數(shù)中，這樣本來是可以的，但是出錯調(diào)試幾率較大，并且讀取到的數(shù)據(jù)龐大還需要額外處理，所以我讀取數(shù)據(jù)邏輯就用的 node-xlsx，十分簡單方便，如果你用的 exceljs 讀取文件數(shù)據(jù)出現(xiàn)問題，大概率是異步同步邏輯搞錯了，多加注意即可
寬度設(shè)置
列寬不知道是以什么為單位，反正不是像素(已測量)，例子中是以厘米為單位再乘以 4.7 的結(jié)果設(shè)置的，4.7 是不斷測試的結(jié)果.
快捷查看列寬的方法，打開 wps 表格，長按列與列字母間的豎線，就能看到列寬，取厘米的單位即可.見下圖
前景色
前景色設(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 }， }
排版不一致的問題
解決 Mac 下編輯 Microsoft Office Word 文檔與 Windows 排版不一致的問題，，不同的系統(tǒng)用 wps 打開相同的表格，打印預(yù)覽的時候，表格寬度顯示不一樣
問題詳細(xì)說明地址
我的解決辦法就是 mac 下顯示正常，按 mac 下的寬度來設(shè)置就可以了
參考資料
exceljs
node-xlsx
js-xlsx
藍(lán)藍(lán)設(shè)計的小編 http://www.73404.com.cn