JavaScript导入xlsx模块报错，导出HTML表格至Excel遇问题

我尝试用函数把HTML表格导出为Excel文件，但调用xlsx模块时一直报错。试过两种导入方式：

• 使用import XLSX from 'xlsx'，运行报错
• 使用const XLSX = require('xlsx');，提示require is not defined

我的代码如下：

import XLSX from 'xlsx'

function CalculateMedia(){

    const wb = XLSX.readFile('C:/Users/pedro/Downloads/WebsiteFinal/assets/ExcelTemplate.xlsx');
    const ws = wb.Sheets['Folha1'];

    ws['B1'] = { t: 'n', v: pt10 };
    ws['C2'] = { t: 'n', v: pt11 };
    ws['D3'] = { t: 'n', v: pt12 };

    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });

    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'result.xlsx';
    document.body.appendChild(link);
    link.click();

    setTimeout(function () {
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
    }, 0);

}

function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff;
    }
    return buf;
}

报错信息如图所示。

解决方法 #

1. 选对模块导入方式，适配运行环境 #

• 浏览器环境：
  require是Node.js专属语法，浏览器里用不了；直接写import也需要项目配置ES模块（比如用Vite、Webpack打包，或者HTML的script标签加type="module"）。最省心的办法：

  1. 从xlsx包的dist目录取出xlsx.full.min.js文件，放到项目静态资源目录
  2. 在HTML中引入脚本：

     <script src="./assets/xlsx.full.min.js"></script>
     

  3. 代码里直接用全局变量XLSX，无需import或require

• Node.js环境：

  1. 先安装包：

     npm install xlsx
     

  2. 根据项目配置选导入方式：

     // CommonJS（默认）
     const XLSX = require('xlsx');
     // 或ES模块（package.json里设了"type": "module"时用）
     import XLSX from 'xlsx';
     

2. 修复浏览器里的模板文件读取问题 #

XLSX.readFile是Node.js本地文件读取API，浏览器无法直接访问本地路径C:/Users/...。换以下方式处理模板：
如果模板是项目静态资源，用fetch获取后解析：

async function CalculateMedia(){
    // 获取模板文件
    const res = await fetch('./assets/ExcelTemplate.xlsx');
    const arrayBuffer = await res.arrayBuffer();
    const wb = XLSX.read(arrayBuffer, { type: 'array' });
    
    // 后续修改单元格、导出逻辑不变
    const ws = wb.Sheets['Folha1'];
    // 确保pt10、pt11、pt12是已定义的数值
    ws['B1'] = { t: 'n', v: pt10 };
    ws['C2'] = { t: 'n', v: pt11 };
    ws['D3'] = { t: 'n', v: pt12 };

    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'result.xlsx';
    document.body.appendChild(link);
    link.click();

    setTimeout(() => {
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
    }, 0);
}

3. 检查变量定义 #

代码里的pt10、pt11、pt12必须是已定义的数值，否则会抛出未定义错误，要确保这些变量在调用CalculateMedia前已赋值。

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