前言：因為業務要求，需要在前端從Excel表格中讀取資料後以json或array格式傳送到後端，或者將後端獲取的資料匯出到Excel中提供檔案下載功能。以下正文：

一、安裝XLSX和FileSaver

npm install --save xlsx file-saver

引用：

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

一、讀取Excel檔案

使用elmentUI的upload元件獲取file物件

<el-upload
      class="upload-demo"
      action="https://www.xxx.com/"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      :show-file-list='false'
      :before-upload="uploadExcel">
      <el-button size="small" type="primary">點選上傳</el-button>
    </el-upload>
 

二、將file物件轉換為WorkBook物件

uploadExcel(file) {
        this.readWorkbookFromLocalFile(file, function(workbook) {
          console.log(workbook)
        })
      }, 
 // 讀取本地excel檔案
      readWorkbookFromLocalFile(file, callback) {
      	var reader = new FileReader();
      	reader.onload = function(e) {
      		var data = e.target.result;
      		var workbook = XLSX.read(data, {type: 'binary'});
      		if(callback) callback(workbook);
      	};
      	reader.readAsBinaryString(file);
      },
 

三、從WorkBook物件中獲取資料

獲取資料需要先獲取workbook中的每一個worksheet物件，再從每個worksheet中讀取資料

獲取資料方法如下：

• 使用sheet_to_csv()獲取csv資料

• 使用sheet_to_txt()獲取txt資料

• 使用sheet_to_html()獲取html資料

• 使用sheet_to_json()獲取json資料

示例：獲取json資料

var sheetNames = workbook.SheetNames; // 工作表名稱集合
var worksheet = workbook.Sheets[sheetNames[0]]; // 這裡我們只讀取第一張sheet
var jsondata = XLSX.utils.sheet_to_json(worksheet);//將worksheet轉換為json物件
 

四、將資料匯入到Excel

匯入execl資料方法如下：

• aoa_to_sheet

• json_to_sheet

• table_to_sheet

• sheet_add_aoa

• sheet_add_json

示例：匯入陣列到excel

exportExcel() {
        var aoa = [
        	['姓名', '性別', '年齡', '註冊時間'],
        	['張三', '男', 18, new Date()],
        	['李四', '女', 22, new Date()]
        ];
        var worksheet = XLSX.utils.aoa_to_sheet(aoa);
        var workbook = {
            SheetNames: ['本地戶主資訊'],
            Sheets: {
                '本地戶主資訊': worksheet
            }
        };
        /* 獲取二進位制字串作為輸出 */
        var wbout = XLSX.write(workbook, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], {
              type: "application/octet-stream"
            }),
            //設定匯出檔名稱
            "歷史記錄.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },

參考：js-xlsx的使用 - 千年輪迴 - 部落格園

GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkit