如何实现XLSX数据导入与输入关键词精准筛选网页展示？

我要做一个简易的XLSX文件网页导航工具，功能包括：

• 通过HTML输入框的关键词筛选文件中匹配的行
• 展示指定行列数据，以网页表格形式呈现

我试过用read-excel-file.min.js导入XLSX数据，已经拿到了行组成的数组，能通过data[index]取行、data[index][index]取单元格，但不知道怎么根据输入框关键词精准筛选数据。还尝试过Microsoft Office JS API，没搞懂用法。

需求示例 #

假设XLSX表格数据如下：

输入关键词“d1”时，需要展示前两行数据。

我尝试过的代码 #

初步HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Excel Transform Site</title>
    <link rel="stylesheet" href="./excel-transfrom.css">
    <script src="https://unpkg.com/read-excel-file@5.x/bundle/read-excel-file.min.js"></script>
</head>
<body>
    <form>
        <input type="file" class="file-choose">

        <label class="test-input-label">Test Input</label><br>
        <input type="text" class="test-input"><br>
        <input type="submit" value="Submit" class="submit-button">
    </form>

    <table class="tbl-excel"></table>

    <script src="./excel-transform.js"></script>
</body>
</html>

初步JS代码（读取XLSX） #

let fileInput = document.querySelector(".file-choose")

fileInput.addEventListener('change', function() {
    readXlsxFile(fileInput.files[0]).then((rows) => {
        console.log(rows)
    })
})

更新后的CSV实现代码 #

const inputForm = document.getElementById("input-form")
const file = document.getElementById("file-choose")
const filterInput = document.getElementById("test-input")

let table = document.createElement("table")
let thead = document.createElement("thead")
let tbody = document.createElement("tbody")

function csvToArray(str, delimiter=',') {
    const headers = str.slice(0, str.indexOf("\n")).split(delimiter)
    const rows = str.slice(str.indexOf("\n") + 1).split("\n")

    headers.pop()

    const arr = rows.map((row) => {
        const values = row.split(delimiter)
        const element = headers.reduce((object, header, index) => {
            object[header] = values[index]
            return object
        }, {})
        return element
    })

    return arr
}

inputForm.addEventListener("submit", (e) => {
    e.preventDefault()

    const input = file.files[0]
    const reader = new FileReader()

    reader.onload = function(e) {
        const text = e.target.result
        const data = csvToArray(text)
        
        table.appendChild(thead)
        table.appendChild(tbody)

        document.getElementById('data-table').appendChild(table)
        
        let hrow = document.createElement('tr')
        for (let i = 0; i < Object.keys(data[0]).length; i++) {
            let theader = document.createElement('th')

            theader.innerHTML = Object.keys(data[0])[i]
            hrow.appendChild(theader)
        }
        thead.appendChild(hrow)

        for (let i = 0; i < data.length; i++) {
            let drow = document.createElement('tr')
            console.log(data[i])
            for (let j = 0; j < Object.values(data[i]).length; j++) {
                let tdata = document.createElement('td')

                tdata.innerHTML = Object.values(data[i])[j]

                drow.appendChild(tdata)
            }
            tbody.appendChild(drow)
        }
    }

    reader.readAsText(input)
})

解决方案（针对XLSX的筛选实现） #

既然你已经能用read-excel-file拿到行数组，直接基于这个数组做筛选即可，不用切换到CSV。以下是完整的实现代码：

优化后的HTML（补全ID，方便JS获取元素） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>XLSX导航工具</title>
    <style>
        table { border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; }
        th { background-color: #f2f2f2; }
    </style>
    <script src="https://unpkg.com/read-excel-file@5.x/bundle/read-excel-file.min.js"></script>
</head>
<body>
    <form id="input-form">
        <input type="file" id="file-choose" accept=".xlsx,.xls">
        <label>关键词筛选：</label>
        <input type="text" id="filter-input" placeholder="输入关键词">
        <button type="submit">加载并筛选</button>
    </form>
    <div id="data-table"></div>

    <script src="./excel-transform.js"></script>
</body>
</html>

完整JS实现（读取XLSX+筛选+表格渲染） #

const inputForm = document.getElementById("input-form");
const fileInput = document.getElementById("file-choose");
const filterInput = document.getElementById("filter-input");
const dataTableContainer = document.getElementById("data-table");

// 存储原始数据，用于筛选
let originalRows = [];

inputForm.addEventListener("submit", (e) => {
    e.preventDefault();
    if (!fileInput.files[0]) {
        alert("请先选择XLSX文件");
        return;
    }

    // 读取XLSX文件
    readXlsxFile(fileInput.files[0]).then((rows) => {
        originalRows = rows;
        // 执行筛选并渲染表格
        filterAndRenderTable(filterInput.value.trim());
    });
});

// 监听输入框变化，实时筛选
filterInput.addEventListener("input", () => {
    if (originalRows.length === 0) return;
    filterAndRenderTable(filterInput.value.trim());
});

// 筛选数据并渲染表格
function filterAndRenderTable(keyword) {
    // 清空容器
    dataTableContainer.innerHTML = "";

    // 筛选逻辑：如果关键词为空，显示所有行；否则筛选任意单元格包含关键词的行
    let filteredRows = originalRows;
    if (keyword) {
        filteredRows = originalRows.filter(row => {
            // 遍历行内所有单元格，检查是否包含关键词（不区分大小写）
            return row.some(cell => {
                return typeof cell === "string" && cell.toLowerCase().includes(keyword.toLowerCase());
            });
        });
    }

    // 如果没有数据，提示
    if (filteredRows.length === 0) {
        dataTableContainer.innerHTML = "<p>没有匹配的数据</p>";
        return;
    }

    // 创建表格
    const table = document.createElement("table");
    const thead = document.createElement("thead");
    const tbody = document.createElement("tbody");

    // 渲染表头（第一行作为表头）
    const headerRow = document.createElement("tr");
    filteredRows[0].forEach(header => {
        const th = document.createElement("th");
        th.textContent = header;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);

    // 渲染数据行（从第二行开始）
    for (let i = 1; i < filteredRows.length; i++) {
        const dataRow = document.createElement("tr");
        filteredRows[i].forEach(cell => {
            const td = document.createElement("td");
            td.textContent = cell;
            dataRow.appendChild(td);
        });
        tbody.appendChild(dataRow);
    }

    table.appendChild(thead);
    table.appendChild(tbody);
    dataTableContainer.appendChild(table);
}

代码说明 #

1. 数据存储：把读取到的原始XLSX行数组存在originalRows里，避免每次筛选都重新读取文件
2. 筛选逻辑：使用Array.filter和Array.some组合，检查每一行的任意单元格是否包含关键词（不区分大小写，若需要精准匹配可修改为全等判断）
3. 实时筛选：监听输入框的input事件，输入时自动更新表格
4. 表格渲染：动态创建DOM元素，清空旧表格后渲染新的筛选结果

内容的提问来源于stack exchange，提问作者user11891672