如何在浏览器端使用SheetJS读取本地Excel文件并转换为HTML展示

兄弟，我懂你卡在哪了——浏览器出于安全限制，根本不让你直接通过本地文件路径去读文件，必须得靠用户主动选择文件才行！我给你一套完整的实现方案，一步步来就能搞定：

第一步：准备HTML结构 #

首先得在页面里加两个东西：一个让用户选择本地Excel的文件选择器，还有一个用来展示转换后表格的容器：

<!-- 限制只允许选择Excel相关格式的文件 -->
<input type="file" id="excelFileInput" accept=".xlsx,.xls,.csv">
<!-- 用来放转换好的HTML表格 -->
<div id="excelHtmlContainer"></div>

第二步：编写JavaScript逻辑 #

接下来就是核心的处理代码，我给你写好完整的，每一步都给你标清楚：

// 先获取页面上的DOM元素
const fileInput = document.getElementById('excelFileInput');
const showContainer = document.getElementById('excelHtmlContainer');

// 监听用户选择文件的事件
fileInput.addEventListener('change', (event) => {
  // 拿到用户选中的文件对象
  const selectedFile = event.target.files[0];
  // 如果用户没选文件就直接返回
  if (!selectedFile) return;

  // 创建FileReader实例来读取文件
  const reader = new FileReader();

  // 当文件读取完成时执行的逻辑
  reader.onload = function(readEvent) {
    // 读取到的ArrayBuffer格式的数据
    const fileData = readEvent.target.result;
    // 用SheetJS解析这个Excel文件
    const workbook = XLSX.read(fileData, { type: 'array' });

    // 这里默认取第一个工作表，你也可以指定表名比如workbook.Sheets['Sheet2']
    const firstSheetName = workbook.SheetNames[0];
    const targetSheet = workbook.Sheets[firstSheetName];

    // 把工作表转换成HTML字符串
    const tableHtml = XLSX.utils.sheet_to_html(targetSheet);

    // 把HTML插入到容器里，就能在页面上看到表格了
    showContainer.innerHTML = tableHtml;
  };

  // 以ArrayBuffer的格式读取文件，这是SheetJS最适配的格式之一
  reader.readAsArrayBuffer(selectedFile);
});

几个关键的注意点 #

• 为什么不能直接用文件路径？浏览器为了安全，禁止JS直接访问本地文件系统的路径，必须通过用户的主动操作（比如点击文件选择器选中文件）来获取File对象，这是唯一合法的方式
• 确保你已经在页面中引入了SheetJS的脚本文件，不然XLSX这个对象会找不到
• 如果你想处理多个工作表，可以遍历workbook.SheetNames数组，把每个工作表都转成HTML然后拼到容器里
• accept属性可以限制用户只能选Excel相关的文件，避免选错格式导致解析出错

备注：内容来源于stack exchange，提问作者user_15