使用 xlsx 库在前端实现 Excel 文件上传及解析

简介

我们将介绍如何使用 xlsx.js 库在前端实现 Excel 文件上传和解析。这对于读取和展示上传的 Excel 数据非常有用。我们将使用一个简单的 HTML 表单，并使用 JavaScript 处理文件上传和解析。

实现如下效果：

准备工作

首先，在 HTML 页面中引入 xlsx.js 库。我们将使用 cdnjs 链接，但您也可以下载该库并在本地引用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.4/xlsx.full.min.js"></script>

创建文件上传表单

在 HTML 页面中，创建一个文件上传表单：

<!-- 用于点击上传文件的输入字段 -->
<input type="file" id="fileInput" style="display: none" accept=".xls,.xlsx" required />
<label for="fileInput" class="label">点击上传文件</label>

<!-- 用于拖放文件上传的输入字段 -->
<div id="dropArea">
    <p>拖拽文件至此处</p>
</div>

<!-- 用于显示解析后的数据表 -->
<div id="table-container" style="margin-top: 20px"></div>

使用 JavaScript 处理文件上传及解析

现在，我们将使用 JavaScript 读取和解析上传的 Excel 文件。在 script 标签中添加以下内容：

const fileInput = document.getElementById("fileInput");
const dropArea = document.getElementById("dropArea");

fileInput.addEventListener("change", (event) => {
    handleFileUpload(event.target.files[0]);
});

dropArea.addEventListener("drop", (e) => {
    e.preventDefault();
    dropArea.style.border = "2px dashed #ccc";
    const droppedFiles = e.dataTransfer.files;
    handleFileUpload(droppedFiles[0]);
});

// 文件上传函数
function handleFileUpload(file) {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    // 定义一个加载完成的回调，在 FileReader 完成文件读取操作后被调用。
    reader.onload = (event) => {
        const data = new Uint8Array(event.target.result);
        const workbook = XLSX.read(data, { type: "array" });

        // 获取工作表名数组
        const sheetNameArray = workbook.SheetNames;
        // 获取第一个工作表
        const firstSheet = workbook.Sheets[sheetNameArray[0]];
        // 将工作表转换为二维数组
        const sheetDataArray = XLSX.utils.sheet_to_json(firstSheet, {
            // defval: "" // 配置这个得到对象数组的格式
            header: 1 // 得到二维数组
        });
        // 调用渲染 Excel 的函数
        renderTable(sheetDataArray);
    };
}

这段代码的执行顺序如下：

1. handleFileUpload(file) 函数被调用，传入一个 File 对象（例如从 input[type=file] 获取的文件）。
2. 创建一个新的 FileReader 实例并将其赋给 reader 变量。
3. 定义一个名为 reader.onload 的回调函数。这个回调函数将在 FileReader 完成文件读取操作后被调用。
4. 调用 reader.readAsArrayBuffer(file)。这将启动读取文件的过程。由于这是一个异步操作，它将在后台运行，不阻塞 JavaScript 的执行。
5. 当文件读取操作完成后，会触发 reader.onload 回调函数。event.target.result 将包含文件的 ArrayBuffer 数据。我们创建一个新的 Uint8Array，将 ArrayBuffer 数据赋给它，这会使得数据更容易处理。
6. 使用 XLSX.read() 函数解析 Uint8Array 数据（原始 Excel 文件的数据），并将结果赋给 workbook 变量。
7. 从 workbook 对象中获取工作表名数组，并将其存储在 sheetNameArray 变量中。
8. 获取第一个工作表（在 sheetNameArray 中的第一个元素指定的工作表）并将其存储在 firstSheet 变量中。
9. 使用 XLSX.utils.sheet_to_json() 函数将 firstSheet 对象转换为一个二维数组（由于 header: 1 参数）。将结果存储在 sheetDataArray 变量中。
10. 调用 renderTable(sheetDataArray) 函数，将二维数组（已解析的 Excel 文件数据）传递给它。这个函数应该负责在页面上呈现数据（具体实现可能因项目而异）。

为了在网页上显示解析后的数据，我们将创建一个名为 renderTable() 的函数。

// 将数据渲染为一个表格
function renderTable(sheetDataArray) {
    const table = document.createElement("table");
    table.classList.add("table", "table-striped");

    sheetDataArray.forEach((row) => {
        const tableRow = document.createElement("tr");

        row.forEach((cell) => {
            const tableCell = document.createElement("td");
            tableCell.textContent = cell;
            tableRow.appendChild(tableCell);
        });

        table.appendChild(tableRow);
    });

    // 添加数据表到表格容器
    const tableContainer = document.getElementById("table-container");
    tableContainer.innerHTML = "";
    tableContainer.appendChild(table);
}

// 为拖放添加事件监听器
dropArea.addEventListener("dragover", (e) => {
    e.preventDefault();
    dropArea.style.border = "2px dashed #333";
});

dropArea.addEventListener("dragleave", () => {
    dropArea.style.border = "2px dashed #ccc";
});

完成以上步骤后，您可以选择和上传 Excel 文件，前端会立即解析并显示文件中的数据内容。