前端實現生成帶有樣式的excel表格 Node和瀏覽器讀寫Excel文件探究實踐

時間 2020-06-08

標籤前端實現生成帶有樣式 excel 表格 node 瀏覽器讀寫文件探究實踐欄目 Microsoft Office 简体版

原文原文鏈接

最近碰到個須要自動生成表格的任務，做爲前端的我，就想在 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 installhtml

npm install -g nodemon前端

調試使用，替代 node 命令，實現保存文件，node 自動從新啓動執行，必須全局安裝才能運行vue

使用

nodemon app.jsnode

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 文件對應表格的樣式react

node 調試

vscode 中打開調試右側設置編輯，將下方代碼複製進去，點 nodemon 啓動就能夠進行 debug 調試了webpack

{
      "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 頁面自動更新呢?git

wps 自帶另存 html 文件功能，可是沒有提供生成的 api ，網上也搜索不到對應的轉換功能，
原本覺得本身要實現一套表格轉 html 的功能。經過不斷嘗試，偶然間發現手機瀏覽器能夠直接打開預覽 xlsx 文件，心裏狂喜啊github

使用方法

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

npm run devchrome

啓動成功以後，會自動打開帶有 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'));
});