2020-5-1 seo達(dá)人
最近碰到個(gè)需要自動(dòng)生成表格的任務(wù)，作為前端的我，就想在 node 和瀏覽器中生成強(qiáng)大的表格，所以特此研究了很多關(guān)于表格的 npm 庫(kù)
支持讀寫 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)，寫入需要依賴 nodejs 或者 FileSaver.js 實(shí)現(xiàn)生成寫入 Excel，可以生成子表 Excel，功能強(qiáng)大，但上手難度稍大。不提供基礎(chǔ)設(shè)置 Excel 表格 api 例單元格寬度，文檔有些亂，不適合快速上手；普通版本不支持定義字體、顏色、背景色等，有這個(gè)功能需要的可以使用 pro 版，是要聯(lián)系客服收費(fèi)的，害我照著 API 設(shè)置調(diào)試了好多次都失敗。好在樣式設(shè)置問題有一些教程，通過研究本人已解決，可設(shè)置寬度顏色等等，見根目錄本人修改的 xlsx.js
xlsx-style 基于 xlsx 封裝的樣式庫(kù)，可以在 xlsx 的基礎(chǔ)上設(shè)置樣式。樣式不全，寬度都設(shè)置不了，好多年前作者就不維護(hù)了.寬度設(shè)置問題本人已解決了，見修改的 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ò)過了。本教程主要針對(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)槊看紊赏瓯砀瘢看味夹枰蜷_表格查看樣式，在 windows 電腦中，打開表格之后就鎖定不能生成新文件了，本來想著能導(dǎo)出一個(gè) html 文件對(duì)應(yīng)表格的樣式
node 調(diào)試
vscode 中打開調(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 目錄的作用
每次生成完新表格，都需要重新打開表格查看樣式，在 windows 電腦中，打開表格之后就鎖定了，再次生成新表格就會(huì)報(bào)錯(cuò)，文件已鎖定，不能寫入，對(duì)于想偷懶的我，能不能實(shí)現(xiàn)像 webpack 熱更新功能那種，修改樣式 js 頁(yè)面自動(dòng)更新呢?
wps 自帶另存 html 文件功能，但是沒有提供生成的 api ，網(wǎng)上也搜索不到對(duì)應(yīng)的轉(zhuǎn)換功能，
本來以為自己要實(shí)現(xiàn)一套表格轉(zhuǎn) html 的功能。通過不斷嘗試，偶然間發(fā)現(xiàn)手機(jī)瀏覽器可以直接打開預(yù)覽 xlsx 文件，內(nèi)心狂喜啊
使用方法
進(jìn)入 webpack 目錄安裝依賴包，安裝好之后執(zhí)行
npm run dev
啟動(dòng)成功之后，會(huì)自動(dòng)打開帶有 ip 地址的預(yù)覽地址，此時(shí)在電腦瀏覽器會(huì)自動(dòng)下載 xlsx 文件，忽略不管，用手機(jī)直接打開此地址，就能看到 xlsx 表格的內(nèi)容了，并且每次新修改內(nèi)容和樣式，都會(huì)自動(dòng)刷新頁(yè)面顯示新表格.
小技巧
谷歌瀏覽器插件:
生成二維碼的插件生成二維碼方便手機(jī)掃描
劃詞翻譯 用來翻譯一些看不懂的英文文檔
browser 目錄
瀏覽器中實(shí)現(xiàn)生成 xlsx 表格方法
進(jìn)入 browser 目錄安裝依賴包，安裝好之后執(zhí)行
npm run dev
啟動(dòng)成功之后，拖動(dòng)根目錄 src 下的李四表格到頁(yè)面上的輸入框里，成功生成表格之后會(huì)生成一個(gè)下載鏈接地址，右鍵在新標(biāo)簽頁(yè)打開鏈接，即會(huì)生成一個(gè)新的表格文件出來，完整 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 使用注意
讀取文件問題
因?yàn)?exceljs 讀取文件不支持 sync 同步讀取，給的實(shí)例也是 await 例子.導(dǎo)致我讀取完遇到一個(gè)問題，就是老是生成不成功，最后發(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'));
});
所有邏輯全部要寫入這個(gè)函數(shù)中，這樣本來是可以的，但是出錯(cuò)調(diào)試幾率較大，并且讀取到的數(shù)據(jù)龐大還需要額外處理，所以我讀取數(shù)據(jù)邏輯就用的 node-xlsx，十分簡(jiǎn)單方便，如果你用的 exceljs 讀取文件數(shù)據(jù)出現(xiàn)問題，大概率是異步同步邏輯搞錯(cuò)了，多加注意即可
寬度設(shè)置
列寬不知道是以什么為單位，反正不是像素(已測(cè)量)，例子中是以厘米為單位再乘以 4.7 的結(jié)果設(shè)置的，4.7 是不斷測(cè)試的結(jié)果.
快捷查看列寬的方法，打開 wps 表格，長(zhǎng)按列與列字母間的豎線，就能看到列寬，取厘米的單位即可.見下圖
前景色
前景色設(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ù)覽的時(shí)候，表格寬度顯示不一樣
問題詳細(xì)說明地址
我的解決辦法就是 mac 下顯示正常，按 mac 下的寬度來設(shè)置就可以了
參考資料
exceljs
node-xlsx
js-xlsx
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn