如何用JavaScript实现在浏览器中预览Blob转的Word、Excel文件而不下载？

浏览器原生只支持PDF的内置预览，对于.doc/.docx/.xls这类Office格式，直接用window.open()打开Blob URL肯定会触发下载——毕竟浏览器没自带Office文件的渲染引擎。下面给你几个靠谱的解决方案，完全在浏览器端或者配合你的.NET Core API就能实现，不用跳外部网站：

1. 使用JavaScript库解析并渲染文件内容 #

这种方法把文件内容直接转换成HTML，在页面内展示，全程浏览器端处理，不需要后端额外支持：

处理Word文档（.doc/.docx） #

可以用mammoth.js这个轻量库，它能把docx文件转换成结构清晰的HTML，对旧版.doc文件也有基础支持。你可以通过npm安装它，或者把库的脚本文件下载到本地引入：

async function previewWordBlob(blob) {
  // 将Blob转为ArrayBuffer
  const arrayBuffer = await blob.arrayBuffer();
  // 转换为HTML结构
  const result = await mammoth.convertToHtml({arrayBuffer: arrayBuffer});
  
  // 创建预览容器并添加到页面
  const previewContainer = document.createElement('div');
  previewContainer.innerHTML = result.value;
  // 自定义样式美化预览内容
  previewContainer.style.cssText = `
    padding: 2rem;
    max-width: 900px;
    margin: 2rem auto;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  `;
  document.body.appendChild(previewContainer);
  
  // 可查看转换过程中的格式警告（比如不支持的元素）
  console.log("转换提示:", result.messages);
}

处理Excel文档（.xls/.xlsx） #

用**SheetJS（xlsx库）**解析Excel文件，直接转换成HTML表格：

async function previewExcelBlob(blob) {
  // 将Blob转为ArrayBuffer
  const arrayBuffer = await blob.arrayBuffer();
  // 解析Excel工作簿
  const workbook = XLSX.read(arrayBuffer, { type: 'array' });
  // 获取第一个工作表
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  // 转换为HTML表格
  const htmlTable = XLSX.utils.sheet_to_html(worksheet);
  
  // 创建预览容器
  const previewContainer = document.createElement('div');
  previewContainer.innerHTML = htmlTable;
  previewContainer.style.cssText = `
    padding: 2rem;
    max-width: 900px;
    margin: 2rem auto;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  `;
  // 美化表格样式
  const table = previewContainer.querySelector('table');
  table.style.borderCollapse = 'collapse';
  table.querySelectorAll('td, th').forEach(cell => {
    cell.style.border = '1px solid #ddd';
    cell.style.padding = '8px';
  });
  document.body.appendChild(previewContainer);
}

2. 利用iframe实现浏览器原生预览（兼容性有限） #

如果你不想自己解析渲染，可以尝试用iframe加载Blob URL，但这种方法的兼容性取决于浏览器和用户系统是否安装了Office组件（比如新版Edge集成了Office预览能力，大概率能直接渲染；Chrome/Firefox可能还是会触发下载）：

function previewOfficeBlob(blob) {
  const fileURL = URL.createObjectURL(blob);
  // 创建iframe容器
  const iframe = document.createElement('iframe');
  iframe.src = fileURL;
  iframe.style.width = '100%';
  iframe.style.height = '85vh';
  iframe.style.border = 'none';
  
  // 创建弹窗遮罩层
  const modal = document.createElement('div');
  modal.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  `;
  modal.appendChild(iframe);
  document.body.appendChild(modal);
  
  // 点击遮罩关闭预览并释放URL
  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      document.body.removeChild(modal);
      URL.revokeObjectURL(fileURL);
    }
  });
}

3. 后端转换为PDF（最稳定的方案，需修改.NET Core API） #

如果你的后端可以调整，最稳妥的方式是在API里把Office文件转换成PDF，然后前端用你已经实现的PDF预览逻辑展示。比如在.NET Core里可以用以下工具：

• 处理Word：GemBox.Document
• 处理Excel：EPPlus

举个Word转PDF的后端示例：

// 先安装GemBox.Document NuGet包
public IActionResult ConvertWordToPDF(IFormFile file)
{
    // 设置授权密钥（免费版有字数限制，生产环境需付费）
    ComponentInfo.SetLicense("FREE-LIMITED-KEY");
    var document = DocumentModel.Load(file.OpenReadStream());
    
    using var ms = new MemoryStream();
    document.Save(ms, SaveOptions.PdfDefault);
    ms.Position = 0;
    
    return File(ms, "application/pdf", $"{Path.GetFileNameWithoutExtension(file.FileName)}.pdf");
}

前端调用这个接口拿到PDF Blob后，直接复用你现有的PDF预览代码即可。

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