如何在不将内容转为图片的前提下将React组件导出为PDF？

针对你的场景，以下两种方案都不需要将富文本转成图片，可保留文字可选、矢量SVG/UI样式的效果，同时解决分页溢出问题：

方案1：最小改动适配现有页面（无需重构组件） #

使用jsPDF最新版本自带的html()接口，配合打印样式的分页规则即可实现：

• 核心适配逻辑：
  • 给需要导出的页面根容器设置唯一ID，比如id="export-root"
  • 对于canvas元素，提前调用toDataURL("image/png")转成base64格式嵌入，jsPDF会原生保留canvas的渲染效果
  • SVG、MUI组件、DraftJS渲染的富文本DOM不需要额外处理，接口会自动识别样式和内容，导出后富文本可正常选中复制，SVG保持矢量清晰度
• 分页问题解决：
  给不需要被分页截断的块级元素（比如完整的富文本段落、MUI卡片组件）添加CSS类avoid-break，并设置全局打印样式：

  @media print {
    .avoid-break {
      page-break-inside: avoid;
    }
  }
  

  jsPDF的html()接口会自动识别该规则，结合A4纸的可用高度自动分页，不会出现内容被切割的问题。

方案2：高精度自定义导出（适合需要定制PDF布局的场景） #

使用@react-pdf/renderer库，用React语法编写PDF专属组件，完全脱离浏览器打印逻辑，分页完全可控：

• 适配逻辑：
  • 将DraftJS输出的富文本结构解析为库支持的<Text />、<View />组件，保留原有的富文本样式
  • MUI组件的样式可以映射到库的StyleSheet规则中，保持UI一致性
  • canvas元素转base64后通过<Image />组件嵌入，SVG直接使用库自带的SVG相关组件实现还原
• 该方案导出的PDF质量最高，完全不受浏览器环境影响，适合对导出效果要求高的场景。

纯前端即可实现，不需要后端参与，导出的HTML打开后和原页面效果完全一致：

• 核心实现逻辑：获取导出容器的完整DOM结构，提取页面所有生效的CSS样式（包括MUI动态生成的样式），拼接为完整的HTML字符串后通过Blob对象导出，参考代码如下：

const exportAsHTML = () => {
  const exportRoot = document.getElementById('export-root');
  // 提取页面所有样式规则
  const allStyles = Array.from(document.styleSheets)
    .map(sheet => {
      try {
        return Array.from(sheet.cssRules).map(rule => rule.cssText).join('');
      } catch (err) {
        return '';
      }
    })
    .join('');
  // 拼接完整HTML文件内容
  const fullHTML = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>导出页面</title>
  <style>${allStyles}</style>
</head>
<body>
  ${exportRoot.outerHTML}
</body>
</html>
  `;
  // 触发下载
  const blob = new Blob([fullHTML], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'exported-page.html';
  downloadLink.click();
  URL.revokeObjectURL(url);
};

• 如果需要保留canvas的内容，提前将canvas转成带base64资源的<img />标签替换原canvas节点即可，SVG标签可直接保留，不需要额外处理。

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