前端實作生成帶有樣式的excel表格 Node和浏覽器讀寫Excel檔案探究實踐

最近碰到個需要自動生成表格的任務，作為前端的我，就想在 node 和浏覽器中生成強大的表格，是以特此研究了很多關于表格的 npm 庫

支援讀寫 Excel 的 node.js 子產品

node-xlsx: 基于 Node.js 解析 excel 檔案資料及生成 excel 檔案，僅支援 xlsx 格式檔案
js-xlsx: 目前 Github 上 star 數量最多的處理 Excel 的庫，支援解析多種格式表格 XLSX / XLSM / XLSB / XLS / CSV，解析采用純 js 實作，寫入需要依賴 nodejs 或者 FileSaver.js 實作生成寫入 Excel，可以生成子表 Excel，功能強大，但上手難度稍大。不提供基礎設定 Excel 表格 api 例單元格寬度，文檔有些亂，不适合快速上手；普通版本不支援定義字型、顔色、背景色等，有這個功能需要的可以使用 pro 版，是要聯系客服收費的，害我照着 API 設定調試了好多次都失敗。好在樣式設定問題有一些教程，通過研究本人已解決，可設定寬度顔色等等，見根目錄本人修改的 xlsx.js
xlsx-style 基于 xlsx 封裝的樣式庫，可以在 xlsx 的基礎上設定樣式。樣式不全，寬度都設定不了，好多年前作者就不維護了.寬度設定問題本人已解決了，見修改的 xlsx-style.js 檔案
exceljs 在使用此庫之前，本人已花費了很大的精力，用以上庫做好了表格，但是發現不能設定頁眉頁腳，添加圖檔，列印選項設定等等，直到發現了這個庫，文檔齊全，功能強大，并且還免費.但是star較少，差一點就錯過了。本教程主要針對這個庫

代碼庫位址

https://github.com/lingxiaoyi/excel

安裝

npm install

npm install -g nodemon

調試使用，替代 node 指令，實作儲存檔案，node 自動重新啟動執行，必須全局安裝才能運作

使用

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 電腦中，打開表格之後就鎖定不能生成新檔案了，本來想着能導出一個 html 檔案對應表格的樣式

node 調試

vscode 中打開調試右側設定編輯，将下方代碼複制進去，點 nodemon 啟動就可以進行 debug 調試了

{
      "type": "node"，
      "request": "launch"，
      "name": "nodemon"，
      "runtimeExecutable": "nodemon"，
      "program": "${workspaceFolder}/app.js"，
      "restart": true，
      "console": "integratedTerminal"，
      "internalConsoleOptions": "neverOpen"，
      "skipFiles": ["<node_internals>/**"]
    }，

webpack 目錄的作用

每次生成完新表格，都需要重新打開表格檢視樣式，在 windows 電腦中，打開表格之後就鎖定了，再次生成新表格就會報錯，檔案已鎖定，不能寫入，對于想偷懶的我，能不能實作像 webpack 熱更新功能那種，修改樣式 js 頁面自動更新呢?

wps 自帶另存 html 檔案功能，但是沒有提供生成的 api ，網上也搜尋不到對應的轉換功能，

本來以為自己要實作一套表格轉 html 的功能。通過不斷嘗試，偶然間發現手機浏覽器可以直接打開預覽 xlsx 檔案，内心狂喜啊

使用方法

進入 webpack 目錄安裝依賴包，安裝好之後執行

npm run dev

啟動成功之後，會自動打開帶有 ip 位址的預覽位址，此時在電腦浏覽器會自動下載下傳 xlsx 檔案，忽略不管，用手機直接打開此位址，就能看到 xlsx 表格的内容了，并且每次新修改内容和樣式，都會自動重新整理頁面顯示新表格.

小技巧

谷歌浏覽器插件:

生成二維碼的插件生成二維碼友善手機掃描
劃詞翻譯用來翻譯一些看不懂的英文文檔

browser 目錄

浏覽器中實作生成 xlsx 表格方法

進入 browser 目錄安裝依賴包，安裝好之後執行

npm run dev

啟動成功之後，拖動根目錄 src 下的李四表格到頁面上的輸入框裡，成功生成表格之後會生成一個下載下傳連結位址，右鍵在新标簽頁打開連結，即會生成一個新的表格檔案出來，完整 api 使用和 demo 檔案請參考 index.js

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

一些概念

在使用這個庫之前，先介紹庫中的一些概念。

workbook 對象，指的是整份 Excel 文檔。我們在使用 js-xlsx 讀取 Excel 文檔之後就會獲得 workbook 對象。
worksheet 對象，指的是 Excel 文檔中的表。我們知道一份 Excel 文檔中可以包含很多張表，而每張表對應的就是 worksheet 對象。
cell 對象，指的就是 worksheet 中的單元格，一個單元格就是一個 cell 對象。

xlsx 使用注意事項

constXLSX = require(\'xlsx\'); 
let html = XLSX.utils.sheet_to_html(workbook.Sheets.Sheet1)

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

exceljs 使用注意

讀取檔案問題

因為 exceljs 讀取檔案不支援 sync 同步讀取，給的執行個體也是 await 例子.導緻我讀取完遇到一個問題，就是老是生成不成功，最後發現必須要把所有邏輯全部放入函數中，像下方這樣

(async function (params) {
  let res = await workbook.xlsx.readFile(`${__dirname}/趙六.xlsx`);
  //執行所有資料處理邏輯
  //執行寫的邏輯
  workbook.xlsx.writeFile(path.resolve(__dirname， \'../webpack/test222.xlsx\'));
});

所有邏輯全部要寫入這個函數中，這樣本來是可以的，但是出錯調試幾率較大，并且讀取到的資料龐大還需要額外處理，是以我讀取資料邏輯就用的 node-xlsx，十分簡單友善，如果你用的 exceljs 讀取檔案資料出現問題，大機率是異步同步邏輯搞錯了，多加注意即可

寬度設定

列寬不知道是以什麼為機關，反正不是像素(已測量)，例子中是以厘米為機關再乘以 4.7 的結果設定的，4.7 是不斷測試的結果.

快捷檢視列寬的方法，打開 wps 表格，長按列與列字母間的豎線，就能看到列寬，取厘米的機關即可.見下圖

前景色

前景色設定必須右鍵單元格選擇設定單元格格式，然後選擇圖案樣式選擇顔色，就可以前景色填充

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 排版不一緻的問題，，不同的系統用 wps 打開相同的表格，列印預覽的時候，表格寬度顯示不一樣

問題詳細說明位址

我的解決辦法就是 mac 下顯示正常，按 mac 下的寬度來設定就可以了

參考資料

exceljs
node-xlsx
js-xlsx

創作不易，如果對你有幫助，請給個星星 star✨✨ 謝謝，位址https://github.com/lingxiaoyi/excel