一、導(dǎo)出 Excel 文件

導(dǎo)出 Excel 文件通常涉及將數(shù)據(jù)轉(zhuǎn)化為 Excel 文件格式（如 .xlsx 或 .xls）。在純 JavaScript 中，我們可以通過(guò)手動(dòng)生成一個(gè) Excel 文件的格式化內(nèi)容并下載。

1.1 創(chuàng)建 Excel 表格

Excel 文件通常由多個(gè)工作表（Sheet）構(gòu)成，而每個(gè)工作表中包含一個(gè)表格（Grid）。我們通過(guò)生成表格數(shù)據(jù)，并利用 Blob 對(duì)象生成二進(jìn)制數(shù)據(jù)，最終下載成 Excel 文件。

function exportExcel(data, filename) {
    const ws_name = "Sheet1"; // 設(shè)置工作表的名稱(chēng)
    const wb = {
        SheetNames: [ws_name],
        Sheets: {}
    };

    // 將二維數(shù)據(jù)數(shù)組轉(zhuǎn)換為 Excel 格式
    const ws_data = [];
    for (let i = 0; i < data.length; i++) {
        ws_data.push(data[i]);
    }

    // 通過(guò) SheetJS 的標(biāo)準(zhǔn)格式進(jìn)行生成
    const ws = XLSX.utils.aoa_to_sheet(ws_data);

    wb.Sheets[ws_name] = ws;

    // 生成文件下載鏈接
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([wbout], { type: "application/octet-stream" });

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename || 'export.xlsx';
    link.click();
}

1.2 觸發(fā)下載

上面的代碼段生成了一個(gè)包含數(shù)據(jù)的 Excel 文件，但沒(méi)有直接觸發(fā)下載。通過(guò)創(chuàng)建一個(gè)臨時(shí)的 a 標(biāo)簽，并利用 Blob 對(duì)象來(lái)觸發(fā)文件的下載。

const data = [
    ["Name", "Age", "City"],
    ["Alice", 25, "New York"],
    ["Bob", 30, "San Francisco"],
    ["Charlie", 35, "London"]
];

exportExcel(data, "people.xlsx");

這段代碼將會(huì)生成一個(gè) people.xlsx 文件，并下載到本地。

1.3 小結(jié)

通過(guò)簡(jiǎn)單的 JavaScript，我們可以輕松地將二維數(shù)據(jù)數(shù)組導(dǎo)出為 Excel 文件。生成文件的關(guān)鍵是利用 Blob 對(duì)象進(jìn)行二進(jìn)制數(shù)據(jù)流的處理，以及通過(guò) a 標(biāo)簽觸發(fā)文件下載。

二、讀取 Excel 文件

讀取 Excel 文件并解析內(nèi)容相對(duì)復(fù)雜一些，因?yàn)?Excel 文件本質(zhì)上是二進(jìn)制格式數(shù)據(jù)。雖然沒(méi)有第三方庫(kù)的幫助，我們也可以通過(guò) FileReader API 讀取文件，手動(dòng)解析 Excel 文件中的數(shù)據(jù)。

2.1 讀取 Excel 文件并解析數(shù)據(jù)

可以通過(guò) FileReader API 讀取文件內(nèi)容，并將其轉(zhuǎn)化為一個(gè)可以處理的對(duì)象。我們使用 XMLHttpRequest 或 FileReader 讀取文件，然后使用 Blob 來(lái)轉(zhuǎn)換二進(jìn)制數(shù)據(jù)。

function readExcel(file, callback) {
    const reader = new FileReader();
    
    // 讀取文件內(nèi)容
    reader.onload = function (e) {
        const data = e.target.result;
        
        // 使用 FileReader 解析文件的二進(jìn)制數(shù)據(jù)
        const binaryData = new Uint8Array(data);
        const workbook = XLSX.read(binaryData, { type: 'array' });

        // 獲取工作表的數(shù)據(jù)
        const sheet = workbook.Sheets[workbook.SheetNames[0]];
        const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });  // 將工作表內(nèi)容轉(zhuǎn)化為二維數(shù)組

        callback(rows);  // 傳遞解析結(jié)果
    };

    reader.readAsArrayBuffer(file);
}

2.2 處理 Excel 文件

通過(guò)上面的代碼，我們可以將讀取的 Excel 文件解析成二維數(shù)組（每一行數(shù)據(jù)為數(shù)組中的一個(gè)子數(shù)組）。然后你可以根據(jù)需求進(jìn)行數(shù)據(jù)展示、存儲(chǔ)或其他操作。

// 假設(shè)文件上傳控件
const input = document.getElementById('file-input');
input.addEventListener('change', function (e) {
    const file = e.target.files[0];
    
    // 調(diào)用 readExcel 函數(shù)
    readExcel(file, function (data) {
        console.log(data);  // 輸出解析后的數(shù)據(jù)
    });
});

這段代碼會(huì)通過(guò)文件上傳控件讀取用戶選擇的 Excel 文件，并解析出文件中的內(nèi)容。最終，解析的數(shù)據(jù)將通過(guò) callback 回調(diào)傳遞給用戶。

2.3 小結(jié)

通過(guò) FileReader API 和 XLSX 庫(kù)（這里假設(shè)使用了相關(guān)工具解析 Excel 文件），可以將 Excel 文件內(nèi)容讀取為一個(gè)可以操作的 JavaScript 對(duì)象或二維數(shù)組。然后，我們就能進(jìn)行后續(xù)的處理，如渲染、分析或存儲(chǔ)。

三、總結(jié)

本文介紹了如何在沒(méi)有第三方庫(kù)的情況下，使用純 JavaScript 來(lái)實(shí)現(xiàn) Excel 文件的導(dǎo)入和導(dǎo)出功能。對(duì)于導(dǎo)出 Excel，我們通過(guò)構(gòu)建 Excel 的二進(jìn)制格式并觸發(fā)下載，達(dá)到了不依賴(lài)外部庫(kù)的目的。而對(duì)于讀取 Excel 文件，我們使用了原生的 FileReader API 來(lái)讀取文件并解析出其內(nèi)容。

雖然沒(méi)有引入第三方庫(kù)，純 JS 實(shí)現(xiàn)的讀取和導(dǎo)出 Excel 功能仍然是可行的，但在復(fù)雜場(chǎng)景下，如處理大量數(shù)據(jù)或支持多個(gè) Excel 格式，使用像 XLSX 這類(lèi)專(zhuān)門(mén)的庫(kù)會(huì)更加高效和靈活。

這樣，你可以根據(jù)項(xiàng)目需求決定是否使用外部庫(kù)，或者僅依賴(lài)原生 API 來(lái)實(shí)現(xiàn)功能。

到此這篇關(guān)于利用純JavaScript實(shí)現(xiàn)讀取和導(dǎo)出Excel文件的文章就介紹到這了,更多相關(guān)純JS讀取和導(dǎo)出Excel文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論