JavaScript操作XLSX文件的示例詳解

更新時(shí)間：2024年11月15日 09:07:31 作者：樂聞x

本文將深入探討如何使用強(qiáng)大的xlsx庫來操作Excel文件,本文將涵蓋如何在Node.js和瀏覽器環(huán)境中讀取Excel文件,創(chuàng)建新的Excel文件等內(nèi)容,感興趣的小伙伴可以了解下

前言

Excel 文件（通常以 .xlsx 為后綴）在各種業(yè)務(wù)場景中都有廣泛應(yīng)用，如數(shù)據(jù)分析、財(cái)務(wù)報(bào)告和其他數(shù)據(jù)表單處理。掌握如何在前端或后端使用 JavaScript 對這些 Excel 文件進(jìn)行讀取、創(chuàng)建和修改，能夠顯著提升我們的開發(fā)效率和數(shù)據(jù)處理能力。

本文將深入探討如何使用強(qiáng)大的 xlsx 庫來操作 Excel 文件。我們將涵蓋如何在 Node.js 和瀏覽器環(huán)境中讀取 Excel 文件、創(chuàng)建新的 Excel 文件、修改現(xiàn)有的 Excel 文件以及處理復(fù)雜的 Excel 數(shù)據(jù)結(jié)構(gòu)。

常用操作

讀取 Excel 文件

在 Node.js 環(huán)境中讀取本地文件

在 Node.js 環(huán)境中，我們可以輕松地讀取本地的 Excel 文件。以下示例展示了如何讀取本地的 example.xlsx 文件并將其內(nèi)容轉(zhuǎn)換為 JSON 格式：

const XLSX = require('xlsx');
const workbook = XLSX.readFile('example.xlsx');

// 獲取第一個(gè)工作表
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// 將工作表轉(zhuǎn)換為 JSON 數(shù)據(jù)
const data = XLSX.utils.sheet_to_json(worksheet);

console.log(data);

在瀏覽器環(huán)境中讀取用戶上傳的文件

在瀏覽器環(huán)境中，處理用戶上傳的文件是常見需求。以下示例展示了如何結(jié)合 HTML 的

<input type="file"> 元素讀取用戶上傳的 Excel 文件：
<input type="file" id="upload" accept=".xlsx" />

<script>
document.getElementById('upload').addEventListener('change', handleFile, false);

function handleFile(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet);

        console.log(jsonData);
    };

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

創(chuàng)建 Excel 文件

創(chuàng)建并下載新的 Excel 文件是另一個(gè)常見需求。以下示例展示了如何生成包含示例數(shù)據(jù)的 Excel 文件，并允許用戶下載：

<button id="download">下載 Excel 文件</button>

<script>
document.getElementById('download').addEventListener('click', function() {
    // 創(chuàng)建數(shù)據(jù)
    const data = [
        { "Name": "John", "Age": 30, "City": "New York" },
        { "Name": "Peter", "Age": 25, "City": "London" },
        { "Name": "Sara", "Age": 22, "City": "Paris" }
    ];

    // 將數(shù)據(jù)轉(zhuǎn)換為工作表
    const worksheet = XLSX.utils.json_to_sheet(data);

    // 創(chuàng)建工作簿并添加工作表
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    // 生成 Excel 文件并下載
    XLSX.writeFile(workbook, 'example.xlsx');
});
</script>

修改 Excel 文件

修改現(xiàn)有的 Excel 文件也是常見的操作需求。以下示例展示了如何讀取 Excel 文件、修改某個(gè)單元格的值并保存修改后的文件：

const XLSX = require('xlsx');
const workbook = XLSX.readFile('example.xlsx');

const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// 修改單元格 A1 的值
worksheet['A1'].v = 'Modified Value';

// 保存修改后的文件
XLSX.writeFile(workbook, 'modified_example.xlsx');

進(jìn)階操作

1. 處理多個(gè)工作表

如果 Excel 文件包含多個(gè)工作表，我們可以遍歷所有工作表并處理每個(gè)工作表的數(shù)據(jù)：

const XLSX = require('xlsx');
const workbook = XLSX.readFile('example.xlsx');

// 遍歷所有工作表
workbook.SheetNames.forEach(sheetName => {
    const worksheet = workbook.Sheets[sheetName];
    const data = XLSX.utils.sheet_to_json(worksheet);
    console.log(Sheet: ${sheetName}, data);
});

2. 處理復(fù)雜的數(shù)據(jù)結(jié)構(gòu)

處理嵌套的表格或進(jìn)行數(shù)據(jù)清洗需要使用 JavaScript 的數(shù)組和對象方法：

const XLSX = require('xlsx');
const workbook = XLSX.readFile('complex_example.xlsx');

const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// 將工作表轉(zhuǎn)換為 JSON 數(shù)據(jù)
const data = XLSX.utils.sheet_to_json(worksheet);

// 清洗數(shù)據(jù)，去除空值并計(jì)算某一列的總和
const cleanedData = data.filter(row => row['Value'] !== null && row['Value'] !== undefined);
const totalValue = cleanedData.reduce((sum, row) => sum + row['Value'], 0);

console.log('Cleaned Data:', cleanedData);
console.log('Total Value:', totalValue);

3. 指定單元格格式

const XLSX = require('xlsx');
const data = [
    { "Date": new Date(), "Amount": 123.45 }
];

const worksheet = XLSX.utils.json_to_sheet(data);
worksheet['A1'].z = 'mm/dd/yyyy'; // 指定日期格式
worksheet['B1'].z = '#,##0.00';  // 指定數(shù)字格式

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, 'formatted_example.xlsx');

4. 合并單元格

const XLSX = require('xlsx');
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet([
    ['Title1', null, 'Title2'],
    ['Data1', 'Data2', 'Data3']
]);

// 合并單元格 A1 和 B1
worksheet['!merges'] = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } // s 是開始單元格，e 是結(jié)束單元格
];

XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, 'merged_cells_example.xlsx');

5. 設(shè)置單元格樣式

雖然 xlsx 庫本身對樣式支持有限，但可以借助 exceljs 庫來實(shí)現(xiàn)更豐富的樣式設(shè)置：

const ExcelJS = require('exceljs');
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');

worksheet.columns = [
    { header: 'Name', key: 'name' },
    { header: 'Age', key: 'age' },
    { header: 'City', key: 'city' }
];

worksheet.addRow({ name: 'John', age: 30, city: 'New York' });

// 設(shè)置列寬和單元格樣式
worksheet.getColumn('name').width = 20;
worksheet.getRow(1).font = { bold: true };
worksheet.getCell('A2').fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: 'FFFF0000' }
};

workbook.xlsx.writeFile('styled_example.xlsx');

總結(jié)

本文詳細(xì)介紹了如何使用 JavaScript 操作 XLSX 文件，涵蓋讀取、創(chuàng)建和修改文件的基本操作以及處理復(fù)雜數(shù)據(jù)和應(yīng)用常用技巧。通過靈活運(yùn)用 xlsx 庫，開發(fā)者可以在前端和后端環(huán)境中高效地處理 Excel 文件，從而提升數(shù)據(jù)處理和分析的效率。

以上就是JavaScript操作XLSX文件的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript操作XLSX的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: