iframe在不同屏幕尺寸下无法显示Blob PDF页面，存在Quirks Mode问题

现象 #

• 从PDF中逐页提取生成Blob URL，作为iframe的src参数，桌面端正常显示
• 切换Chrome DevTools到移动设备尺寸时，浏览器提示「Page layout may be unexpected due to Quirks Mode」，iframe内PDF无法正常渲染
• 使用AWS存储桶的完整PDF原URL时，iframe在所有设备尺寸下都能正常工作

已排查项 #

• 排除Next.js的DOCTYPE问题（框架自动注入标准DOCTYPE）
• 注释组件所有SCSS样式后问题依旧，排除CSS影响
• 锁定问题出在Blob URL的生成或加载环节

相关代码 #

生成Blob URL的原代码 #

const newPages: string[] = [];
for (let i = 0; i < sourceDoc.getPageCount(); i++) {
  const [page] = await pdfDoc.copyPages(sourceDoc, [i]);
  pdfDoc.addPage(page);
  const pdfBytes = await pdfDoc.save();
  const blob = new Blob([pdfBytes], { type: "application/pdf" });
  const url = URL.createObjectURL(blob);
  newPages.push(url);
  pdfDoc.removePage(0);
}
setPages(newPages);

iframe代码对比 #

// 全设备正常的iframe（AWS存储桶URL）
<iframe
  src={pdfUrl + `#toolbar=0&view=FitH`}
/>

// 仅桌面端正常的iframe（Blob URL）
<iframe
  src={pageUrl + `#toolbar=0&view=FitH`}
/>

解决方案 #

1. 修复单页PDF生成逻辑 #

原代码复用同一个pdfDoc实例，反复添加/删除页面可能导致生成的单页PDF缺失必要元数据，引发渲染模式异常。改为每次循环创建全新的PDF文档实例：

const newPages: string[] = [];
for (let i = 0; i < sourceDoc.getPageCount(); i++) {
  // 创建独立的单页PDF文档
  const singlePageDoc = await PDFDocument.create();
  const [page] = await singlePageDoc.copyPages(sourceDoc, [i]);
  singlePageDoc.addPage(page);
  const pdfBytes = await singlePageDoc.save();
  const blob = new Blob([pdfBytes], { type: "application/pdf" });
  const url = URL.createObjectURL(blob);
  newPages.push(url);
}
setPages(newPages);

2. 优化iframe渲染属性 #

给iframe添加明确的响应式尺寸样式和权限属性，确保不同设备下的渲染容器正常：

<iframe
  src={pageUrl + `#toolbar=0&view=FitH`}
  style={{ width: '100%', height: '100vh', border: 'none' }}
  allow="fullscreen"
  title={`PDF Page ${index + 1}`}
/>

3. 清理Blob URL避免内存泄漏 #

组件卸载时记得释放Blob URL资源：

useEffect(() => {
  return () => {
    pages.forEach(url => URL.revokeObjectURL(url));
  };
}, [pages]);

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