React中如何将iframe内容导出为PDF？jsPDF/kendo导出空白解决

导出PDF空白的核心原因是iframe属于独立的文档隔离上下文，不管是jsPDF还是@progress/kendo-react-pdf，导出PDF的原理都是遍历当前父页面的DOM树、抓取节点样式和内容后渲染生成PDF，无法穿透边界读取iframe内部渲染的实际内容，你代码中选中的#certificate只是一个空的iframe标签，自然导出的PDF是空白的。

优先选择直接渲染HTML内容的方案，稳定性最高，不需要处理跨上下文读取的兼容问题：

• 保留原有iframe做页面预览即可，不要把iframe作为PDF导出的目标节点
• 单独新增一个专门用于PDF导出的容器，直接把contentRef存储的证书HTML字符串渲染到这个容器中，容器放在PDFExport组件的包裹范围内
• 为了不影响页面正常展示，可以把导出专用容器用绝对定位移出可视区域，不要用display: none隐藏，否则会导致DOM尺寸计算错误、导出内容缺失
• 导出时直接选中这个渲染了实际证书内容的容器节点调用savePDF即可

参考实现代码：

import { PDFExport, savePDF } from '@progress/kendo-react-pdf';
import { useState, useRef } from 'react';

const CertificatePage = () => {
  const [contentRef, setContentRef] = useState('');
  const certificateExportRef = useRef(null);

  const downloadCertificate = () => {
    if (!certificateExportRef.current) return;
    savePDF(certificateExportRef.current, { 
      paperSize: 'A4',
      margin: '1cm',
      scale: 1
    });
  };

  return (
    <div>
      {/* 原有预览用iframe保留，不参与导出 */}
      <iframe
        title="View your certificate"
        className="u-els-margin-left-3x u-els-margin-right-3x"
        width="776px"
        height="600px"
        srcDoc={contentRef}
      />

      {/* 导出专用区域，移出视口不影响页面显示 */}
      <div style={{ position: 'absolute', left: '-9999px', top: 0, width: '794px' }}>
        <PDFExport paperSize="A4">
          <div
            id="certificate"
            ref={certificateExportRef}
            // 直接渲染证书HTML，不经过iframe隔离
            dangerouslySetInnerHTML={{ __html: contentRef }}
          />
        </PDFExport>
      </div>

      <button onClick={downloadCertificate}>下载证书PDF</button>
    </div>
  );
};

• 证书HTML内的外联样式、远程图片、自定义字体需要提前转成内联资源，或者等所有资源加载完成后再触发导出，否则会出现样式错乱、图片空白、字体不对的问题
• 如果必须从iframe中读取内容导出，需要等iframe加载完成后，通过document.querySelector('#certificate').contentDocument.body拿到iframe内部的实际DOM节点，克隆后再传给导出方法，但这种方式容易出现样式丢失、资源加载判断复杂的问题，不推荐使用

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