React前端如何在页面内显示后端认证后的PDF文件

要在当前页面嵌入带认证的PDF，核心是把axios获取到的Blob转成Object URL存在组件状态里，再用iframe/embed标签渲染，同时注意清理URL避免内存泄漏。

完整实现代码 #

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const PDFViewer = () => {
  // 存储PDF的Object URL
  const [pdfUrl, setPdfUrl] = useState(null);

  const getPDF = () => {
    axios.get(`${process.env.REACT_APP_API}/Link/to/the/PDF/`, {
      responseType: 'blob', // 必须指定为blob类型，否则无法正确解析PDF
    })
    .then((r) => {
      // 将Blob转为浏览器可识别的本地URL
      const objectUrl = URL.createObjectURL(r.data);
      setPdfUrl(objectUrl);
    })
    .catch((err) => {
      console.error('加载PDF失败:', err);
    });
  };

  // 组件卸载时清理Object URL，防止内存泄漏
  useEffect(() => {
    return () => {
      if (pdfUrl) {
        URL.revokeObjectURL(pdfUrl);
      }
    };
  }, [pdfUrl]);

  return (
    <div>
      <button onClick={getPDF}>加载PDF</button>
      {/* 仅当pdfUrl存在时渲染PDF容器 */}
      {pdfUrl && (
        <iframe
          src={pdfUrl}
          title="内嵌PDF预览"
          style={{ width: '100%', height: '80vh', border: 'none' }}
        />
      )}
    </div>
  );
};

export default PDFViewer;

关键说明 #

1. Blob类型指定：必须设置responseType: 'blob'，否则axios会把PDF二进制数据当成普通文本解析，导致生成的URL无效。
2. Object URL管理：用组件状态存储生成的URL，确保组件渲染时能正确读取；卸载时调用URL.revokeObjectURL释放Blob资源，避免内存泄漏。
3. 替代渲染标签：除了iframe，也可以用<embed>或<object>，用法一致：

   <embed src={pdfUrl} type="application/pdf" style={{ width: '100%', height: '80vh' }} />
   

4. 认证问题原因：之前直接用iframe/object标签加载后端PDF URL失败，是因为浏览器加载外部资源时不会自动带上axios请求中的认证信息（比如请求头token、登录cookie），而通过axios先获取Blob再转成本地URL，就能绕过这个限制。

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