如果你有需要使用前端匯出 Excel 且需要將 Excel 加上樣式，推薦參考這篇文章！

如果你剛好使用 xlsx-style 碰到了套件本身的 Error 問題，更推薦參考這篇文章！

如果你只是想單純看看前端怎麼使用套件將 Data、Table、JSON 匯出，超級推薦這篇，但請各路大神手下留情。

Summary & 摘要

這篇文章不會特別去比較各種 Excel 匯出的套件差異，單純會講解如何從這個需求一路到使用 xlsx-style 這個套件且踩坑一段時間，一路到成功解決這個問題。

如果你只想知道關於 xlsx-style 的 ./cptable 坑，歡迎跳至下方使用指南瀏覽。

不得不說前端之路真的很孤獨啊，筆者察覺到台中(不確定是不是只有台中，因為目前只在台中就職)的前端職缺超級超級超級缺，但職缺待遇卻都超級超級超級差，不曉得到底是沒有人才？！還是沒有好公司呢？！因為這個原因，所以每間公司的前端都少得可憐，能討論的人也都很有限…有空在寫一篇文章來談談這個狀況吧

需求

俗話說得好 - 『 工程師的成長推力是需求，是PM，是客戶，是薪水 』（ 開個小玩笑 。

如果你剛好有這個需求，但不想要太過複雜，可以使用 d3.js 的 csv api 即可達成匯入匯出，甚至可以匯出圖表。

在最後決定使用 xlsx-style 時，其實也考慮過 exceljs ，但因為需求上需要在輸出後加上樣式，故改選前者，如果你並不需要更改樣式，可以選擇後者，仔細去 Github 瞧瞧，後者有中文介紹( 對 筆者就是膚淺 )，且前者說真的文件不易讀，而且後來很多 Fork 出來相關的套件有很多隱藏的坑。

關於 xlsx 及 xlsx-style 的關係

使用指南

Step1：事前準備

首先我們需要安裝相關套件

1

$ npm i xlsx xlsx-style file-saver -S

1
2
3
4
5
6
7
8
9
10
11
12
13

function downloadFileHandler(blob) {
  // 建立一個 a 標籤供 插入檔案 及 點擊
  var link = document.createElement('a');
  // 插入檔案
  link.href = window.URL.createObjectURL(blob);
  link.download = `excel - ${new Date()}.xlsx`;
  // 在網頁插入這個 DOM
  document.body.appendChild(link);
  // 點擊下載
  link.click();
  // 移除網頁上這個 DOM
  document.body.removeChild(link);
}

1
2
3
4
5

// 引入套件
import { saveAs } from "file-saver";

// 將你的 blob 丟進來 並 下載
saveAs(blob, `excel - ${new Date()}.xlsx`);

Step2：Know Bug

xlsx-style issues Can’t resolve ‘./cptable’ in ‘myPath\node_modules\xlsx-style\dist’ #100

not found cptable in node_modules/xlsx-style/dist/cpexcel.js_FWodong的博客-程序员宅基地

vue导入xlsx-style组件报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

看到後面因為瞧到了 Vue 的解法，但筆者使用的是 React ，不過兩者原理應該相去不遠，所以筆者開始研究怎麼解開這個難題。

請不要再直接改 807 行了…

Step3：Debug

打開終端機安裝套件：

1

$ npm i react-app-rewired customize-cra -S

這邊要先說說為什麼需要安裝 react-app-rewired 這個套件，而這個檔案是什麼；以往寫 Vue 都是直接創建 Webpack.config.js 去修改 Webpack 的設定，但因為 React 透過 Create React App 去建立 React 應用的一個腳手架工具，他將你不需要關心的設定都配置好，就像 Apple IOS ，所以直接創建並配置 Webpack.config.js 不是一個聰明的決定。

React 其實預設有提供 eject 可以噴射出( 抱歉筆者字典直接翻譯，覺得很好記就用這個詞了 )他們原本的封裝在 Create React App 的配置，反編譯到目前的專案，缺點是 之後 Create React App 升級後你再也享受不到升級後的好處，因為他已經是以檔案的形式存在的你專案 ，故這邊不推薦這個『 噴射設定方式 』。

為了享有 Create React App 之後升級還能跟上升級後的福利，又能客製化設定，這邊就要依靠 react-app-rewired 這個套件。

而 customize-cra 這個套件提供了 override 這個 api ，讓程式可以吃到你創建的 config-overrides.js 這支檔案，這隻檔案可以想像成 webpack.config.js 。

接著讓我們創建一支檔案放在專案根目錄，命名為 config-overrides.js ，然後裡面打上：

1
2
3
4
5
6
7

const { override, addWebpackExternals } = require("customize-cra");

module.exports = override(
  addWebpackExternals({
    "./cptable": "var cptable",
  })
);

正如上方提到爬文時看見了 Vue 的配置，大致的用意就是告訴編譯時，如果碰到 ./cptable 這個關鍵字，就替換成 var cptable 。

然後到 package.json 把 react-scripts start 那邊的程式碼改為：

1
2
3
4
5
6
7
8
9

//...略
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  // 這個先不改，我們這邊也不會用到
  "eject": "react-scripts eject"
},
//...略

最後再重跑一次 npm start ，就會發現沒有噴錯了( 筆者計時卡關半已天多… )。

這個步驟講了這麼多，簡單快速的在敘述一下整個過程。

安裝套件 react-app-rewired 用於最後替代 package.json 的 react-scripts

安裝套件 customize-cra 用於透過該套件 api 去吃到 config-overrides.js 的設定 及 取代編譯後套件的錯誤

創建 config-overrides.js 修改 webpack 的配置。

休息一下，我們繼續。

Step4：基本概念

在使用套件前我們必須先知道 xlsx 的基礎，這大段沒興趣可跳過，雖字多，但強烈建議閱讀。

首先要知道 Excel 的一些名稱對應，在 xlsx 設定上我們會使用到 Cell Object(單元格)、Worksheet Object(工作表)、Workbook Object(工作簿) …這三個，分別是從最小到最大單位範圍的 單元格、工作表、工作簿(通常指包含全部的工作表) ；有興趣可以詳細參考 JavaScript导出excel文件，并修改文件样式 ，這邊只會大略說明。

知乎 - JavaScript导出excel文件，并修改文件样式

ITW01 - JavaScript匯出excel檔案，並修改檔案樣式

Gihub - xlsx-style

Gihub - xlsx aka Sheetjs

Github - react-app-rewired