JS讀取Excel文件

在這個信息化時代，Excel文件的使用已經非常普遍。然而，如果要在網頁上使用這些數據，讀取Excel文件並將其轉換成可讀格式就變得尤為重要。在JavaScript中，讀取Excel文件也非常容易，本文將從多個方面為大家詳細闡述Js讀取Excel文件的方法。

一、文件格式

首先，在讀取Excel文件之前，我們需要了解Excel文件的格式。Excel文件主要有兩種格式：xls和xlsx。xls格式是舊版本的Excel文件，在2007年之前廣泛使用。而xlsx格式是新版本的Excel文件，它使用Open XML格式，比xls格式更加靈活，並且允許大量數據。因此，在閱讀Excel文件之前，我們需要確定使用的Excel文件的格式。

const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; //文件類型xlsx

二、讀取Excel文件

讀取Excel文件的主要目的是將數據導出為JavaScript對象。雖然JavaScript不能直接讀取Excel文件，但是，這可以通過File API輕鬆完成。我們可以通過HTML的文件輸入來獲取Excel文件，並使用FileReader來讀取文件。下面的代碼片段演示了如何使用File API獲取Excel文件：

const input = document.querySelector('input[type="file"]'); //獲取文件輸入input元素const reader = new FileReader();//FileReader對象

input.addEventListener('change', function () {
    const file = input.files[0];
    reader.readAsBinaryString(file);//返回讀取完的文件
    reader.onload = function () {
        const data = reader.result;//讀取文件的結果
    };
});

三、解析Excel文件

接下來，我們需要解析Excel文件，這可以通過使用JavaScript表格讀取器來輕鬆實現。JavaScript表格讀取器可以讀取Excel文件並將其轉換為JavaScript對象。其中，SheetJS是一個流行的JavaScript表格讀取器。下面的代碼演示如何使用SheetJS來解析Excel文件並將其轉換為JavaScript對象。

const input = document.querySelector('input[type="file"]');
const reader = new FileReader();

input.addEventListener('change', function () {
    const file = input.files[0];
    reader.readAsBinaryString(file);
    reader.onload = function () {
        const data = reader.result;
        const workbook = XLSX.read(data, { type: "binary" });//解析Excel文件
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet);//將Excel轉換成可讀的JavaScript對象
    };
});

四、使用Excel文件中的數據

最後，我們可以在JavaScript中使用導出的Excel文件數據。由於Excel文件數據已轉換為JavaScript對象，因此我們可以像使用任何其他JavaScript對象一樣使用它們。例如，您可以將其用作視圖模板的數據源。

const input = document.querySelector('input[type="file"]');
const reader = new FileReader();

input.addEventListener('change', function () {
    const file = input.files[0];
    reader.readAsBinaryString(file);
    reader.onload = function () {
        const data = reader.result;
        const workbook = XLSX.read(data, { type: "binary" });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet);

        jsonData.forEach(item => {
            //在界面上顯示數據
            const row = document.createElement('tr');
            const cell1 = document.createElement('td');
            cell1.textContent = item.name;
            row.appendChild(cell1);
            const cell2 = document.createElement('td');
            cell2.textContent = item.age;
            row.appendChild(cell2);
            table.appendChild(row);
        });
    };
});

五、總結

JavaScript的能力不僅局限於在網頁上顯示靜態數據。通過將Excel文件導入JavaScript對象，您可以在網頁上創建動態數據視圖，並且可以根據需要以不同的方式使用該數據。在代碼編寫中，我們需要我們首先了解Excel文件的格式，其次，讀取Excel文件的主要目的是將數據導出為JavaScript對象，最後，我們需要解析Excel文件，將其轉換為JavaScript對象。最終，我們可以在JavaScript中使用導出的Excel文件數據，使Excel文件更加靈活。