如何使用JavaScript读取本地项目Excel指定单元格数据输出到HTML页面

浏览器端JavaScript受安全策略限制，无法直接读取本地磁盘任意路径的文件，但如果你的Excel文件存放在Web项目的静态资源目录下（和HTML文件同属服务可访问范围），完全不需要手动上传操作，可以直接加载解析实现你要的效果。

步骤1：引入解析依赖 #

使用read-excel-file库解析Excel内容，你可以把库文件下载到本地项目目录用相对路径引入，完全不需要依赖外部资源：

<script src="./static/read-excel-file.min.js"></script>

步骤2：实现核心逻辑 #

核心思路是页面初始化时就提前加载解析项目内的Excel文件，把结果缓存成二维数组，后续调用readData时直接从缓存取值，不需要重复加载。

// 缓存解析后的表格数据
let excelCache = null;

/**
 * 初始化加载Excel文件
 * @param {string} filePath 项目内Excel文件的相对路径
 */
async function initExcel(filePath) {
  const res = await fetch(filePath);
  const buffer = await res.arrayBuffer();
  // 解析结果为二维数组：行索引从0开始对应Excel第1行，列索引从0开始对应Excel第A列
  excelCache = await readXlsxFile(buffer);
}

/**
 * 读取指定单元格内容
 * @param {number} row Excel行号，从1开始
 * @param {string|number} col Excel列，支持传'A'/'B'格式字母，或从1开始的数字
 * @returns 单元格内容
 */
function readData(row, col) {
  if (!excelCache) throw new Error('Excel尚未加载完成，请在初始化完成后调用');
  // 行号转数组索引
  const rowIdx = row - 1;
  // 列参数转数组索引
  let colIdx;
  if (typeof col === 'string') {
    colIdx = col.toUpperCase().charCodeAt(0) - 'A'.charCodeAt(0);
  } else {
    colIdx = col - 1;
  }
  // 边界判断，不存在的单元格返回空字符串
  if (rowIdx < 0 || colIdx < 0 || !excelCache[rowIdx] || excelCache[rowIdx][colIdx] === undefined) {
    return '';
  }
  return excelCache[rowIdx][colIdx];
}

/**
 * 可选：自动渲染标记了单元格的DOM元素
 */
function renderExcelCells() {
  document.querySelectorAll('[data-cell]').forEach(el => {
    const [row, col] = el.dataset.cell.split(',');
    el.textContent = readData(Number(row), col.trim());
  });
}

步骤3：页面使用 #

注意：不要直接双击HTML文件用file://协议打开，需要启动本地静态服务（比如VSCode的Live Server插件、node的http-server）访问，否则fetch加载本地文件会被跨域策略拦截。

页面加载完成后先初始化Excel，之后就可以自由调用readData，也可以用自定义属性实现你想要的直接在标签里绑定单元格的效果：

<body>
  <!-- 直接给标签加data-cell属性，标记要读取的行列，初始化后会自动填充内容 -->
  <h4 data-cell="1,A"></h4>

  <script>
    window.onload = async () => {
      // 替换成你自己项目里的Excel文件路径
      await initExcel('./data/测试表格.xlsx');
      // 自动填充所有标记了data-cell的标签
      renderExcelCells();

      // 也可以直接在JS里手动调用取值
      console.log('B2单元格内容：', readData(2, 'B'));
    }
  </script>
</body>

补充说明 #

• 你之前查到的需要手动上传的方案，是用来处理用户本地磁盘、不在项目静态资源目录下的文件场景，你当前需求是读取项目自带的固定Excel文件，用上面的初始化加载方案完全不需要用户做上传操作。
• 如果需要支持多字母列（比如AA、AB列）、多Sheet读取，只需要扩展列索引转换逻辑、给readXlsxFile传对应Sheet配置即可，基础单表单字母列场景上面的代码可以直接用。
• 你示例里写的直接在标签内嵌套<script>readData(1,A)</script>的写法有时序问题：浏览器解析到这段脚本时Excel还没加载完成，会直接报错，用上面的data-cell属性绑定的方案更稳定，效果和你预期一致。

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