js 无控件读取excel

JavaScript 无控件读取 Excel 文件通常指的是在不使用第三方库如 ActiveX 控件、Flash 或 Java Applet 的情况下，直接在浏览器环境中读取 Excel 文件的内容。这可以通过以下几种方式实现：

基础概念

File API: HTML5 引入了 File API，允许网页读取用户选择的文件。
Blob 对象: 表示不可变的原始数据，可以用来处理二进制数据。
ArrayBuffer 和 Typed Arrays: 用于处理二进制数据的底层结构。
SheetJS (xlsx): 一个流行的 JavaScript 库，可以在浏览器中解析和生成 Excel 文件。

类型与应用场景

类型: 主要用于读取 .xlsx 和 .xls 格式的 Excel 文件。
应用场景: 数据导入、报表生成、在线数据分析等。

示例代码

以下是一个简单的示例，展示如何使用 SheetJS 库在浏览器中读取 Excel 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Read Excel</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
</head>
<body>
    <input type="file" id="excel-file" />
    <pre id="output"></pre>

    <script>
        document.getElementById('excel-file').addEventListener('change', function(e) {
            var file = e.target.files[0];
            if (!file) return;

            var reader = new FileReader();
            reader.onload = function(e) {
                var data = new Uint8Array(e.target.result);
                var workbook = XLSX.read(data, {type: 'array'});

                // 获取第一个工作表
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // 将工作表转换为JSON对象
                var json = XLSX.utils.sheet_to_json(worksheet, {header: 1});
                document.getElementById('output').textContent = JSON.stringify(json, null, 2);
            };
            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>