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

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

1.1 創(chuàng)建 Excel 表格

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

function exportExcel(data, filename) {
    const ws_name = "Sheet1"; // 設(shè)置工作表的名稱
    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]);
    }

    // 通過 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ā)下載

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

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

exportExcel(data, "people.xlsx");

這段代碼將會生成一個 people.xlsx 文件，并下載到本地。

1.3 小結(jié)

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

二、讀取 Excel 文件

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

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

可以通過 FileReader API 讀取文件內(nèi)容，并將其轉(zhuǎn)化為一個可以處理的對象。我們使用 XMLHttpRequest 或 FileReader 讀取文件，然后使用 Blob 來轉(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 文件

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

// 假設(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ù)
    });
});

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

2.3 小結(jié)

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

三、總結(jié)

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

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

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

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

最新評論