解析 SheetJS js-xlsx:在前端讀取並操作 Excel 表格
在前端應用中,SheetJS js-xlsx 是一個功能豐富的 JavaScript 函式庫,專門用於處理 Excel 表格。這篇教學將引導您如何使用 js-xlsx 來匯入和讀取 Excel 表單,並更進一步地介紹如何從多個工作表中提取您所需的數據。
安裝 SheetJS js-xlsx
首先,確保您的項目中已經安裝了 SheetJS js-xlsx。您可以使用 npm 或 yarn 進行安裝:
npm install xlsx
或
yarn add xlsx
基本的 Excel 表單讀取
讓我們先從基本的 Excel 表單讀取開始。以下是一個簡單的範例:
import * as XLSX from 'xlsx';
// 讀取 Excel 文件
const fileInput = document.getElementById('excel-file-input');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const data = new Uint8Array(event.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// 獲取第一個工作表的數據
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
// 現在您可以在這裡使用 'worksheet' 進行數據操作
console.log(XLSX.utils.sheet_to_json(worksheet, { header: 1 }));
};
reader.readAsArrayBuffer(file);
});
這段程式碼允許用戶選擇一個 Excel 文件,並在讀取後將其內容顯示在控制台上。這只是一個基本的範例,您可以根據項目需求進行擴展。
提取最後保存的工作表
如果您的 Excel 文件包含多個工作表,您可能需要僅提取最後保存的工作表。以下是一個方法:
// 獲取活動工作表的索引
let activeTab = 0;
// 檢查是否存在活動工作表的信息
if (typeof workbook.Workbook.WBView !== undefined) {
if (Array.isArray(workbook.Workbook.WBView) && workbook.Workbook.WBView.length > 0) {
activeTab = workbook.Workbook.WBView[0].activeTab;
}
}
// 獲取活動工作表的名稱
const activeSheetName = workbook.SheetNames[activeTab];
// 獲取對應的工作表物件
const activeWorksheet = workbook.Sheets[activeSheetName];
這個方法通過檢查活動工作表的信息,從而確定最後保存的工作表的索引,並透過該索引來獲取對應的工作表物件。
進階操作
SheetJS 還提供了豐富的 API,可以進行更多進階的操作,例如修改數據、新增行列、應用樣式等。您可以查閱 SheetJS 官方文檔 以深入了解這些功能。
這篇教學帶您快速入門 SheetJS js-xlsx,從基本的 Excel 表單讀取開始,到提取最後保存的工作表。請注意,使用這些工具時,應謹慎處理來源不受信任的 Excel 文件,以避免潛在的安全問題。
這只是 SheetJS 的冰山一角,希望這個教學能夠啟發您在前端應用中更廣泛地應用 js-xlsx。