我太懂这个痛点了——iframe对付PDF、图片这类格式得心应手，但碰到Excel、Word就直接触发下载，完全达不到预览的效果。别着急，这里有几个实用的方案，能帮你在网页里直接搞定Excel表格的预览：

方案1：利用微软在线预览接口 #

微软提供了免费的在线文档预览服务，支持直接嵌入Excel、Word等Office文件，不需要用户下载就能预览。你只需要把iframe的src替换成对应的接口格式即可：

<iframe 
  src="https://view.officeapps.live.com/op/embed.aspx?src=https://your-domain.com/img/sample.xlsx" 
  width="500" 
  height="500"
  frameborder="0"
></iframe>

注意：这里的https://your-domain.com/img/sample.xlsx需要是你的Excel文件的公开可访问的完整URL，如果是本地开发环境，可能需要把文件部署到公网服务器上才能正常加载。

方案2：使用SheetJS前端解析库 #

如果不想依赖第三方服务，或者需要处理用户上传的Excel文件，SheetJS（xlsx.js）是个绝佳选择。它能在前端直接解析Excel文件，然后转换成HTML表格渲染出来，完全不需要后端参与。

示例代码如下：

<!-- 引入SheetJS库（建议下载到本地使用，避免依赖外部CDN） -->
<script src="./xlsx.full.min.js"></script>

<!-- 文件选择控件 -->
<input type="file" id="excelFileInput" accept=".xlsx, .xls">

<!-- 预览容器 -->
<div id="excelPreviewContainer" style="margin-top: 20px;"></div>

<script>
// 监听文件选择事件
document.getElementById('excelFileInput').addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 读取文件内容
  const fileReader = new FileReader();
  fileReader.onload = function(event) {
    // 解析Excel文件
    const arrayBuffer = event.target.result;
    const workbook = XLSX.read(new Uint8Array(arrayBuffer), { type: 'array' });

    // 获取第一个工作表（你也可以根据需求选择其他工作表）
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];

    // 把工作表转换成HTML表格
    const tableHtml = XLSX.utils.sheet_to_html(worksheet);
    
    // 渲染到预览容器
    document.getElementById('excelPreviewContainer').innerHTML = tableHtml;
  };

  fileReader.readAsArrayBuffer(selectedFile);
});
</script>

这个方案的优势是完全自主可控，还能自定义表格的样式（比如加CSS美化），适合需要定制化预览效果的场景。

方案3：提前将Excel转成静态HTML #

如果你的Excel内容不需要频繁更新，最省心的办法就是直接把Excel导出成HTML文件：

1. 打开你的Excel文件
2. 点击「文件」→「另存为」，选择「网页（*.htm; *.html）」格式保存
3. 然后在HTML中直接嵌入这个静态HTML文件：

<iframe src="img/sample.html" width="500" height="500" frameborder="0"></iframe>

这种方式兼容性拉满，不需要任何额外的代码或服务，适合静态内容的预览需求。

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