JavaScript Excel 教學：輕鬆處理和操作試算表数据

JavaScript 與 Excel 概述

在現代的Web開發中，處理Excel文件變得越來越普遍。JavaScript是一個功能強大的工具，可以用來讀取和寫入Excel文件，而不需要後端服務的支持。這篇教學將詳細介紹如何利用JavaScript來操作Excel文件。

必要的工具和庫

要處理Excel文件，我們需要一個專門用於此的JavaScript庫。目前最流行的選擇是SheetJS。這是一個強大的庫，允許你讀取、修改和生成Excel文件。

安裝 SheetJS

可以使用npm或直接通過CDN引入庫。以下是兩種方式：

使用 npm 安裝

在你的項目中運行以下命令：

npm install xlsx

通過 CDN 引入

在你的HTML文件中添加以下引用：

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

讀取 Excel 文件

我們首先來看看如何讀取Excel文件。假設我們有一個用戶可以上傳Excel文件的場景，可以通過以下代碼來實現：

<input type="file" id="input-excel" />
<script>
document.getElementById('input-excel').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, {type: 'array'});

        var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        var jsonData = XLSX.utils.sheet_to_json(firstSheet);
        
        console.log(jsonData);
    };

    reader.readAsArrayBuffer(file);
});
</script>

這段代碼會讀取用戶上傳的Excel文件，並將其轉換為JSON格式，便於後續處理。

生成和下載 Excel 文件

生成Excel文件並讓用戶下載也是常見需求。我們可以使用SheetJS來生成新的Excel文件並觸發下載行為：

<button id="download-excel">下載Excel</button>
<script>
document.getElementById('download-excel').addEventListener('click', function() {
    var data = [
        { '名稱': '張三', '年齡': 28, '性別': '男' },
        { '名稱': '李四', '年齡': 22, '性別': '女' }
    ];

    var worksheet = XLSX.utils.json_to_sheet(data);
    var workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    XLSX.writeFile(workbook, 'example.xlsx');
});
</script>

當用戶點擊該按鈕時，會生成一個包含數據的Excel文件並自動觸發下載。

操控現有 Excel 文件

除了讀取和生成新的Excel文件，有時我們也需要對現有的Excel文件進行修改。這可以通過讀取文件后對工作表進行編輯，再回寫到文件的方式實現：

修改單元格數據

假設我們需要修改某個已存在的單元格數據：

<input type="file" id="input-excel-modify" />
<button id="modify-excel">修改Excel</button>
<script>
var workbook;

document.getElementById('input-excel-modify').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        workbook = XLSX.read(data, {type: 'array'});
    };

    reader.readAsArrayBuffer(file);
});

document.getElementById('modify-excel').addEventListener('click', function() {
    if (workbook) {
        var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        firstSheet['A1'].v = "新數據";

        XLSX.writeFile(workbook, 'modified.xlsx');
    }
});
</script>

這段代碼會在用戶上傳Excel文件並點擊按鈕後，將第一個單元格（A1）修改為“新數據”，並生成並下載修改後的文件。

結論

通過本文教學，我們了解了如何使用JavaScript來讀取、生成和修改Excel文件。SheetJS是一個功能強大的工具，可以滿足大部分的Excel操作需求。率先掌握這些技術，將使你的Web開發工作更具靈活性和效率。