Html2Canvas：跨设备的 PDF 图像输出不一致

Question

问题摘要：

我在不同设备上使用 Html2Canvas 生成的 PDF 图像中遇到差异。虽然该设计在我的笔记本电脑上看起来令人满意，但它在其他设备（例如手机或不同的笔记本电脑）上表现出变化。我怀疑这种不一致可能源于屏幕分辨率的差异。

代码片段：

const DownloadBarcodes = async () => {
try {
  const { isConfirmed } = await getBarcodeText();

  if (isConfirmed) {
    const pdf = new jsPDF({
      unit: "mm",
      format: "a4",
    });

    const imgWidth = 210;
    const imgHeight = 296;
    const qrCodeContainer = document.createElement("div");
    qrCodeContainer.style.width = `${imgWidth}mm`;
    qrCodeContainer.style.height = `${imgHeight}mm`;
    document.body.appendChild(qrCodeContainer);

    const root = createRoot(qrCodeContainer);
    for (let j = 0; j < 2; j++) {
      const headerText = j === 0 ? "Good morning !" : "Good evening ! ";
      for (let i = 0; i < qrCodes.length + 1; i++) {
        const firstName = await extractNameWithoutNumber(
          qrCodes[i]?.waiterName.split(" ")[0]
        );
        root.render(
          <BarcodePaperTemplate
            url={qrCodes[i]?.url}
            name={firstName}
            headerText={headerText}
          />
        );

        const canvas = await html2canvas(qrCodeContainer, {
          willReadFrequently: true,
        });
        const qrCodeDataUrl = canvas.toDataURL("image/png");

        if (i > 0) {
          pdf.addImage(qrCodeDataUrl, "PNG", 0, 0, imgWidth, imgHeight);
          if (i < qrCodes.length + 1) {
            pdf.addPage();
          }
        }
      }
    }
    // Remove the last page (empty page)
    pdf.deletePage(pdf.internal.getNumberOfPages());
    document.body.removeChild(qrCodeContainer);
    const fileName = `${hallChoosen.hallName}.pdf`;
    pdf.save(fileName);

    handleClose();
  }
} catch (e) {
  handleClose();
} finally {
  ShowDialogAgain();
}};

问题详情：

平台差异：Html2Canvas 的 PDF 输出在不同设备之间存在显着差异，这表明由于屏幕分辨率或其他特定于设备的因素而导致渲染方面存在潜在差异。 一致性问题：虽然设计在开发人员的笔记本电脑上看起来令人满意，但它在其他设备（例如手机或不同的笔记本电脑）上表现出意想不到的比例样式和变化。 可能的原因：这种不一致的根本原因可能与不同设备之间的屏幕分辨率或渲染机制的差异有关。

我尝试过的： 我尝试在 React 应用程序中使用 Html2Canvas 生成 PDF 图像。提供的代码片段利用 Html2Canvas 将 div 的内容转换为 base64 字符串，然后将元素捕获到 PDF 文件。我确保 PDF 格式设置为 A4 尺寸，并适当处理了图像尺寸。

期望： 我希望生成的 PDF 图像能够在不同设备上展现一致的设计。具体来说，我预计无论用于渲染的设备如何，布局和比例样式都将保持统一。在我的笔记本电脑上，设计看起来令人满意，让我相信代码实现是正确的。

实际结果： 然而，当在手机或其他笔记本电脑等各种设备上测试该应用程序时，我发现 PDF 输出存在显着变化。与我在笔记本电脑上获得的结果相比，比例样式不同，布局也不一致。这种不一致表明在不同设备上生成的 PDF 图像未对齐，可能是由于屏幕分辨率或其他设备特定因素的差异所致。

请求帮助： 我正在寻求有关如何在使用 Html2Canvas 进行转换时确保跨不同设备的 PDF 输出一致的指导。任何解决此问题的见解或建议将不胜感激。

预先感谢您的协助。

Answer 1

我感谢所有关于我的 html2canvas 和 jsPDF 问题的反馈和建议。我想提供有关如何解决该问题的最新信息。

经过一番调查，我意识到 html2canvas 最适合使用基本的 HTML 标签，如 、

、 等。我面临的问题是由于我使用了更复杂的组件，特别是包含 .为了解决这个问题，我从复杂的组件中删除了样式，并用基本的 HTML 标签（如 ）包裹它们，然后将必要的样式应用于这些元素。这种调整使我能够正确捕获元素并实现所需的输出。

再次感谢您的帮助和建议！

最诚挚的问候， 塔尔·施赖伯