嵌入iframe的Word/Excel Base64自动下载而非显示的问题求助

浏览器没有内置的Word/Excel文件渲染引擎，仅能直接识别并渲染PDF、文本这类格式，因此嵌入Office文件的Base64时会触发下载行为。以下是可行的技术解决方案：

方案1：前端库渲染（无外部服务依赖） #

• 处理Excel：使用SheetJS（xlsx库）解码Base64并转换为HTML表格，再写入iframe展示：

  // base64Str 为你的Excel文件Base64编码
  const workbook = XLSX.read(base64Str, { type: 'base64' });
  const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
  const htmlContent = XLSX.utils.sheet_to_html(firstSheet);
  
  const iframe = document.getElementById('excel-preview');
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.open();
  iframeDoc.write(htmlContent);
  iframeDoc.close();
  

• 处理Word：使用mammoth.js解码docx文件并转换为HTML，再写入iframe：

  // base64Str 为你的Word文件Base64编码
  const buffer = Uint8Array.from(atob(base64Str), c => c.charCodeAt(0));
  mammoth.convertToHtml({ arrayBuffer: buffer })
    .then(res => {
      const iframe = document.getElementById('word-preview');
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      iframeDoc.open();
      iframeDoc.write(res.value);
      iframeDoc.close();
    })
    .catch(err => console.error('渲染失败:', err));
  

方案2：后端转PDF后嵌入 #

将Word/Excel文件在后端转换为PDF格式，再将PDF的Base64编码嵌入iframe，利用浏览器原生PDF渲染能力展示。可通过以下工具实现转换：

• Word转PDF：使用LibreOffice命令行工具、python-docx + pdfkit
• Excel转PDF：使用LibreOffice命令行工具、pandas + pdfkit

注意事项 #

• 前端渲染库对复杂样式（如宏、高级图表）的还原度有限，适合展示结构简单的文件。
• 后端转PDF的方式能更好保留原文件样式，但需要服务器资源支持格式转换。

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