PDF转Blob后嵌入iframe无法显示（Android端）求助

核心错误 #

你当前代码的关键问题是把PDF的URL字符串当成了PDF的二进制内容来创建Blob，本质是生成了一个内容为URL文本的伪PDF文件，浏览器自然无法解析显示。正确逻辑是先获取PDF的二进制数据，再用二进制数据创建Blob。

正确实现方式 #

1. 测试场景（从指定URL获取PDF）

通过fetch请求拿到PDF的二进制数据后，再生成Blob和Object URL：

import { useState, useEffect } from 'react';

function App() {
  const [pdfUrl, setPdfUrl] = useState(null);

  useEffect(() => {
    let objectUrl;
    // 发起请求获取PDF二进制数据
    fetch("http://www.pdf995.com/samples/pdf.pdf")
      .then(res => res.blob()) // 直接将响应转为Blob
      .then(blob => {
        objectUrl = URL.createObjectURL(blob);
        setPdfUrl(objectUrl);
      })
      .catch(err => console.error("加载PDF失败:", err));

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

  if (!pdfUrl) {
    return <div>加载中...</div>;
  }

  return (
    <>
      <h1>iFrame Rendering of PDF Blob</h1>
      <iframe title="pdf" src={pdfUrl} style={{ height: '1250px', width: '100%' }}></iframe>
    </>
  );
}

export default App;

2. 实际项目场景（接收application/pdf响应）

如果后端直接返回application/pdf格式的响应，直接用响应的blob()方法获取Blob即可：

// 用fetch的写法
fetch('/api/your-pdf-interface')
  .then(res => res.blob())
  .then(blob => {
    const objectUrl = URL.createObjectURL(blob);
    // 将objectUrl赋值给iframe的src
  });

// 用axios的写法
axios.get('/api/your-pdf-interface', { responseType: 'blob' })
  .then(res => {
    const blob = res.data;
    const objectUrl = URL.createObjectURL(blob);
    // 处理渲染逻辑
  });

Android端特殊处理 #

你提到Android端无法显示，这是部分Android系统WebView对Blob URL加载PDF的兼容性问题，可尝试以下方案：

• 确保后端返回的Content-Type严格为application/pdf，避免使用application/octet-stream这类模糊类型
• 改用PDF.js库直接渲染PDF内容，绕过WebView对Blob URL的限制
• 若文件体积不大，可将Blob转为base64格式，用data:application/pdf;base64,...作为iframe的src

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