如何在JS中将Iframe内显示的PDF文件存储为Blob类型变量

云原生阿岚

2026-9-23

从展示PDF的Iframe中获取PDF Blob的实现方案

直接读取iframe.contentDocument无法拿到PDF原始数据，有两个核心原因：

若Iframe加载的PDF地址与父页面不同源，浏览器同源策略会禁止你访问contentDocument属性
即使同源，浏览器内置PDF渲染器会把PDF渲染为临时的HTML结构，你拿到的contentDocument是渲染用的DOM树，不是PDF本身的二进制数据

方案1：直接请求PDF资源获取Blob（最稳定）

直接通过fetch请求Iframe指向的PDF地址，拿到Blob对象即可，无需操作Iframe，兼容性最好：

// 替换为你的Iframe ID
const iframe = document.getElementById('your-iframe-id');
const pdfUrl = iframe.src;

// 注意必须满足同源要求，或者PDF服务端配置了CORS允许你的域名访问
fetch(pdfUrl)
  .then(res => {
    if (!res.ok) throw new Error('PDF请求失败');
    return res.blob();
  })
  .then(pdfBlob => {
    // 这里拿到的就是PDF的Blob对象，可直接用于后续处理
    console.log('PDF Blob获取成功', pdfBlob);
  })
  .catch(err => console.error('获取失败：', err));

方案2：先拿Blob再喂给Iframe（避免重复请求）

如果不想重复发起两次PDF请求（一次给Iframe加载，一次fetch拿Blob），可以先请求拿到Blob后生成临时URL赋值给Iframe，一步到位：

const pdfUrl = '你的PDF原始访问地址';

fetch(pdfUrl)
  .then(res => res.blob())
  .then(pdfBlob => {
    // 生成临时Blob URL
    const blobUrl = URL.createObjectURL(pdfBlob);
    // 赋值给Iframe加载展示
    document.getElementById('your-iframe-id').src = blobUrl;
    // 这里直接留存pdfBlob给后续逻辑使用即可
    // 注意：页面销毁/不需要Blob时要调用URL.revokeObjectURL(blobUrl)释放内存
  });