如何将SheetJS读取的Excel变量传递至HTML页面？

你的代码存在几个关键问题，导致页面无法正常展示内容，逐一说明：

1. Script标签使用错误 #

带src属性的<script>标签不能包含内部代码，必须将SheetJS的引入和业务代码拆分为两个独立的script标签。

2. 浏览器环境不支持Node.js专属API #

• 浏览器通过CDN引入SheetJS后，XLSX已经是全局变量，无需使用require('xlsx')。
• XLSX.readFile是Node.js方法，用于读取本地文件系统的文件，浏览器无法直接访问本地文件，需通过用户上传文件或从服务器请求文件的方式获取数据。

3. 代码执行时机问题 #

脚本放在<head>中时，<body>内的DOM元素还未加载完成，document.getElementById("NAME")会返回null，无法设置内容。

修正方案（用户上传文件示例） #

该方案让用户选择本地的new.xlsx文件，读取后展示数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel数据展示</title>
    <!-- 单独引入SheetJS -->
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
    <!-- 添加文件选择控件 -->
    <input type="file" id="fileInput" accept=".xlsx, .xls">
    <ul>
        <li id="NAME"></li>
        <li id="Code1"></li>
        <li id="Code2"></li>
        <li id="Code3"></li>
    </ul>

    <!-- 业务代码放在body末尾，确保DOM加载完成 -->
    <script>
        // 监听文件选择事件
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            // 用FileReader读取文件
            const reader = new FileReader();
            reader.onload = function(event) {
                // 读取ArrayBuffer并解析为workbook
                const data = new Uint8Array(event.target.result);
                const workbook = XLSX.read(data, { type: 'array' });
                
                // 获取Sheet1数据
                const worksheet = workbook.Sheets["Sheet1"];
                const mess = XLSX.utils.sheet_to_json(worksheet);

                if (mess.length > 0) {
                    // 更新DOM内容
                    document.getElementById("NAME").innerHTML = mess[0].name;
                    document.getElementById("Code1").innerHTML = mess[0].code1;
                    // 若有Code2、Code3可补充
                    // document.getElementById("Code2").innerHTML = mess[0].code2;
                    // document.getElementById("Code3").innerHTML = mess[0].code3;
                }
            };
            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>

另一种方案（从服务器加载Excel文件） #

如果new.xlsx和网页放在同一服务器目录下，可通过fetch请求文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel数据展示</title>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
    <ul>
        <li id="NAME"></li>
        <li id="Code1"></li>
        <li id="Code2"></li>
        <li id="Code3"></li>
    </ul>

    <script>
        // 从服务器请求Excel文件
        fetch('new.xlsx')
            .then(response => response.arrayBuffer())
            .then(data => {
                const workbook = XLSX.read(data, { type: 'array' });
                const worksheet = workbook.Sheets["Sheet1"];
                const mess = XLSX.utils.sheet_to_json(worksheet);

                if (mess.length > 0) {
                    document.getElementById("NAME").innerHTML = mess[0].name;
                    document.getElementById("Code1").innerHTML = mess[0].code1;
                }
            })
            .catch(err => console.error('加载文件失败:', err));
    </script>
</body>
</html>

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