React组件转非图片PDF：打印、下载及邮件附件方案求助

我用MUI5开发React组件，设置了两个按钮分别用于打印和下载PDF报告。React组件的父容器为：

<Box ref={componentRef} id="pdf_vehicle_report_purchase_success">

已实现的打印功能 #

点击打印PDF按钮时，使用react-to-print库实现，代码如下：

import { useReactToPrint } from 'react-to-print';

// ...

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  documentTitle: 'PDF Report',
  pageStyle: () => `
        @page { margin: 0mm; }
        @media print {
            ...
            #buttonPdfPrint {
                display: none;
            }
        }
    `
});

该打印功能运行正常，具备以下特性：

• 通过react-to-print准备并打开打印预览窗口，将React组件渲染为文档
• 支持打印或下载文档
• 可应用额外CSS（打印阶段打印图标不可见）
• 内容以文本形式渲染，而非图片

下载PDF的尝试代码 #

针对下载按钮，我编写了类似逻辑，通过返回iframe并传入generateAndSavePDF函数，在该函数中为iframe添加额外CSS后尝试处理：

const vehicleReportStyles2 = `
   ...
`;

const downloadPDF = useReactToPrint({
  content: () => componentRef.current,
  documentTitle: 'PDF Report',
  print: async (printIframe) => {
    await generateAndSavePDF(printIframe);
  }
});

const generateAndSavePDF = async (iFrame) => {
  const iframeDocument = iFrame.contentDocument || iFrame.contentWindow.document;

  // 为iframe注入车辆报告的CSS样式
  const styleElement = document.createElement('style');
  styleElement.appendChild(document.createTextNode(vehicleReportStyles2));
  iframeDocument.head.appendChild(styleElement);

  // 等待样式应用
  await new Promise((resolve) => setTimeout(resolve, 100));

  console.log(iframeDocument); // 返回已注入自定义CSS的iframe
};

遇到的问题 #

尝试了多个库实现下载PDF，但要么将内容转为图片格式，要么完全破坏布局，涉及的库包括：

• jsPDF
• html2canvas
• react-to-pdf
• react-pdf
• @react-pdf/renderer

需求与期望解决方案 #

需要实现以下功能：

• 将React组件转为非图片格式的PDF
• 保留打印预览功能（当前已实现，若有更优方案也可采纳）
• 支持直接下载生成的PDF
• 能够将PDF存储为变量或存入React.useState，用于后续作为邮件附件

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