React中基于Base64打开PDF文件失败，求在线预览解决方案

问题描述 #

已获取服务器返回的PDF文件Base64内容及Content-Type，尝试了两个转换预览函数，但打开时提示文件损坏，需要实现浏览器端直接预览（禁止自动下载）。

常见问题排查 #

出现文件损坏大概率是以下原因：

• Base64内容包含data:application/pdf;base64,前缀未去除，直接解码会引入无效字符
• 第一个函数中base64ToArrayBuffer函数实现错误
• 调用window.URL.revokeObjectURL(url)过早，新窗口还未完成PDF加载就释放了Blob资源

修复后的实现方案 #

方案1：修正window.open预览逻辑 #

先处理Base64前缀，再正确转换为Blob，延迟释放资源：

function handleViewFile(base64Content, contentType = 'application/pdf') {
  try {
    // 去除Base64的data URI前缀（如果存在）
    const cleanBase64 = base64Content.replace(/^data:.*;base64,/, '');
    
    // 转换Base64为Uint8Array
    const binaryStr = atob(cleanBase64);
    const uint8Array = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
      uint8Array[i] = binaryStr.charCodeAt(i);
    }
    
    const blob = new Blob([uint8Array], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    
    // 打开新窗口预览
    const previewWindow = window.open(url, '_blank');
    
    // 监听新窗口关闭事件，再释放Blob资源
    previewWindow?.addEventListener('unload', () => {
      window.URL.revokeObjectURL(url);
    });
    
  } catch (error) {
    console.error('PDF预览失败:', error);
  }
}

方案2：使用iframe嵌入预览（更可控，避免自动下载） #

如果希望在当前页面内预览，而非新窗口，可以用iframe：

import { useState, useEffect } from 'react';

const PDFPreview = ({ base64Content, contentType = 'application/pdf' }) => {
  const [previewUrl, setPreviewUrl] = useState(null);

  const handlePreview = () => {
    try {
      const cleanBase64 = base64Content.replace(/^data:.*;base64,/, '');
      const binaryStr = atob(cleanBase64);
      const uint8Array = new Uint8Array(binaryStr.length);
      for (let i = 0; i < binaryStr.length; i++) {
        uint8Array[i] = binaryStr.charCodeAt(i);
      }
      const blob = new Blob([uint8Array], { type: contentType });
      const url = window.URL.createObjectURL(blob);
      setPreviewUrl(url);
    } catch (error) {
      console.error('PDF预览失败:', error);
    }
  };

  // 组件卸载时释放Blob资源
  useEffect(() => {
    return () => {
      if (previewUrl) {
        window.URL.revokeObjectURL(previewUrl);
      }
    };
  }, [previewUrl]);

  return (
    <div>
      <button onClick={handlePreview}>预览PDF</button>
      {previewUrl && (
        <iframe
          src={previewUrl}
          width="100%"
          height="600px"
          title="PDF Preview"
          style={{ border: '1px solid #eee' }}
        />
      )}
    </div>
  );
};

export default PDFPreview;

关键注意事项 #

• 必须清理Base64前缀：很多后端返回的Base64会带data:[type];base64,前缀，直接解码会导致Blob内容错误
• 延迟释放Blob资源：不能在window.open后立即调用revokeObjectURL，否则新窗口加载PDF时资源已被释放
• iframe预览优势：可以避免浏览器因设置自动下载PDF，完全在页面内展示，更符合需求

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