如何通过HTML iframe展示AWS S3存储的多格式文件？

问题原因 #

浏览器仅内置PDF文件的原生预览能力，XLSX、DOC这类Office格式文件没有原生预览支持，当你把这类文件的Blob直接传给iframe的src时，浏览器会默认触发下载行为，而非展示内容。

解决方案 #

方案1：配置S3预签名URL响应头（依赖浏览器原生支持）

通过AWS SDK生成预签名URL时，指定Content-Disposition: inline（告诉浏览器内联展示）和正确的Content-Type，替代直接传入Blob。这种方式对支持Office预览的浏览器（如Chrome、Edge）有效。

示例代码（AWS SDK v3）：

import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

// 初始化S3客户端
const s3Client = new S3Client({ region: "你的S3区域" });

// 生成带响应头的预签名URL
async function getPreviewUrl(bucketName, fileKey) {
  const command = new GetObjectCommand({
    Bucket: bucketName,
    Key: fileKey,
    ResponseContentDisposition: "inline",
    ResponseContentType: getMimeType(fileKey)
  });
  // URL有效期1小时
  return getSignedUrl(s3Client, command, { expiresIn: 3600 });
}

// 根据文件后缀获取对应MIME类型
function getMimeType(fileKey) {
  const ext = fileKey.split('.').pop().toLowerCase();
  switch(ext) {
    case 'pdf': return 'application/pdf';
    case 'xlsx': return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    case 'doc': return 'application/msword';
    case 'docx': return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
    default: return 'application/octet-stream';
  }
}

之后直接把生成的预签名URL传给iframe的src即可：

<div>
  <iframe className="w-screen h-screen" src={previewUrl} />
</div>

方案2：前端预览库嵌入iframe（兼容所有浏览器）

如果浏览器不支持原生Office预览，可自行搭建一个预览页面，引入第三方库解析文件内容，再通过iframe加载该页面并传递文件Blob。

步骤1：创建预览页面（public/preview.html）

<!DOCTYPE html>
<html>
<head>
  <style>body { margin: 0; }</style>
</head>
<body>
  <div id="preview-content" style="width:100%; height:100vh;"></div>
  <!-- 引入文件解析库 -->
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mammoth@1.6.0/mammoth.browser.min.js"></script>
  <script>
    // 接收主页面传递的文件数据
    window.addEventListener('message', async (e) => {
      const { blob, mimeType } = e.data;
      const contentEl = document.getElementById('preview-content');
      
      // 处理Excel文件
      if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) {
        const reader = new FileReader();
        reader.onload = () => {
          const workbook = XLSX.read(new Uint8Array(reader.result), { type: 'array' });
          const sheetHtml = XLSX.utils.sheet_to_html(workbook.Sheets[workbook.SheetNames[0]]);
          contentEl.innerHTML = sheetHtml;
        };
        reader.readAsArrayBuffer(blob);
      }
      // 处理Word文件
      else if (mimeType.includes('word') || mimeType.includes('document')) {
        const result = await mammoth.convertToHtml({ blob });
        contentEl.innerHTML = result.value;
      }
      // 处理PDF文件
      else if (mimeType === 'application/pdf') {
        const pdfIframe = document.createElement('iframe');
        pdfIframe.src = URL.createObjectURL(blob);
        pdfIframe.style.width = '100%';
        pdfIframe.style.height = '100%';
        contentEl.appendChild(pdfIframe);
      }
    });
  </script>
</body>
</html>

步骤2：主页面中通过iframe加载预览页面并传递文件

import { useEffect, useRef } from 'react';

function FilePreview({ fileBlob, mimeType }) {
  const iframeRef = useRef(null);

  useEffect(() => {
    if (iframeRef.current && fileBlob) {
      // 向预览页面发送文件数据
      iframeRef.current.contentWindow.postMessage({ blob: fileBlob, mimeType }, '*');
    }
    // 组件卸载时释放Blob URL
    return () => {
      if (fileBlob) URL.revokeObjectURL(fileBlob);
    };
  }, [fileBlob, mimeType]);

  return (
    <div>
      <iframe 
        ref={iframeRef}
        className="w-screen h-screen" 
        src="/preview.html"
        sandbox="allow-scripts allow-same-origin"
      />
    </div>
  );
}

注意事项 #

• 方案1的兼容性依赖浏览器对Office文件的预览支持，部分旧浏览器或小众浏览器可能仍会触发下载。
• 方案2需注意第三方库的版本兼容性，以及文件大小限制（过大的文件可能导致预览卡顿）。

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