如何在浏览器客户端使用ExcelJS库 解决dist目录文件缺失问题

旧文档提到的browserify打包文件，仅存在于早期版本的源码仓库dist目录中，4.x及以上新版本已经调整了产物分发规则，不会直接把构建产物提交到源码仓库的dist目录，所以直接拉取源码查找会找不到对应文件。

具体可用的接入方式有两种：

• 方式一：直接使用安装包内的预构建产物
  这是最简便的接入方式，不需要自行打包：
  1. 在本地项目目录执行npm install exceljs安装依赖
  2. 安装完成后打开node_modules/exceljs/dist/路径，即可找到所有浏览器端可用的构建文件：
     • exceljs.min.js：UMD格式产物，适合直接用<script>标签引入，引入后全局会挂载ExcelJS变量可直接调用
     • exceljs.browser.min.js：ES Module格式产物，适合Vite、Webpack等模块化构建的项目直接导入使用
  3. 将需要的产物文件复制到自己项目的静态资源目录，或者在模块化代码中直接导入对应路径即可。
• 方式二：从源码自行构建浏览器产物
  如果需要自定义构建配置，可以拉取源码自行打包：
  1. 将ExcelJS源码拉取到本地
  2. 在源码根目录执行npm install安装全部依赖
  3. 执行npm run build命令触发全量构建
  4. 构建完成后，浏览器端可用的产物会自动输出到源码根目录的dist目录下，直接取用即可。

基础使用示例（script标签引入场景） #

<!-- 引入本地存放的exceljs.min.js文件 -->
<script src="/你的静态资源存放路径/exceljs.min.js"></script>
<script>
// 实例化工作簿
const workbook = new ExcelJS.Workbook();
// 新建工作表
const sheet = workbook.addWorksheet('数据统计');
// 设置列头
sheet.columns = [
  { header: '序号', key: 'id', width: 10 },
  { header: '商品名称', key: 'goodsName', width: 30 },
  { header: '价格', key: 'price', width: 15 }
];
// 写入行数据
sheet.addRow({ id: 1, goodsName: '无线耳机', price: 299 });
sheet.addRow({ id: 2, goodsName: '机械键盘', price: 499 });

// 触发浏览器下载
workbook.xlsx.writeBuffer().then(buffer => {
  const blob = new Blob([buffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  const downloadUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = '商品数据.xlsx';
  a.click();
  URL.revokeObjectURL(downloadUrl);
});
</script>

注意事项 #

• 模块化项目中不要直接导入exceljs主入口，该入口默认是Node.js环境版本，会依赖fs、stream等Node内置模块，浏览器环境运行会报错，必须显式导入dist目录下带browser标识的浏览器专属产物。
• 现有预构建的浏览器产物已经做了Node模块兼容处理，不需要额外在构建工具中配置Node polyfill即可正常运行。

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