html2canvas jspdf 与下一个 js pdf 查看错误

Question

我将 html2canvas jspdf 与 nextjs 一起使用。现在我生成 pdf，但生成的 pdf 外观是错误的。 h1 标签视图类似于 p 标签。我需要修复它。我只需要生成 html 视图到 pdf 。我只需要这个模块使用。请帮助我

"use client";
import { useRef } from "react";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";

export default function Pdf() {
  const reportTemplateRef = useRef(null);
  const handleDownloadPdf = async () => {
    const element = reportTemplateRef.current;
    if (element) {
      const canvas = await html2canvas(element);
      const data = canvas.toDataURL("image/png");

      const pdf = new jsPDF("l", "pt", "a4");
      pdf.html(document.getElementById("testing"), {
        callback: function () {
          pdf.save("print.pdf");
        },
      });
    }
  };
  return (
    <div>
      <div ref={reportTemplateRef} id="testing" className="view">
      <h1>hello world</h1>
      <h2>hello woerld</h2>
      <h3>hello world</h3>
      <h4>hello world</h4>
      <h5>hello world</h5>
      <h6>hello world</h6>
      <br />
      <p>
        hello world Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Quis voluptate laboriosam odit tempora impedit ab, veritatis repellendus
        aut! Molestiae nostrum cum dolores vitae, minus veniam alias architecto
        maiores officia dignissimos.
      </p>
      </div>
      <div className="button">
        <button onClick={handleDownloadPdf}>Download</button>
      </div>
    </div>
  );
}

Answer 1

“看起来像”是什么意思？你指的是h1标签的显示吗？你尝试过在 h1 中添加 CSS 吗？

<h1 style={{ fontSize: '50px' }}>hello world</h1>