Weird spacing around texts.

[GourabPaul007]

I am using react-to-print library in react to print a pdf, then html2pdf library in react to download the pdf. When i print using react-to-print, it prints correctly but when i use html2pdf to download the pdf in client side, the styling gets messed up. some elements are pushed upwards/downwards or added with spaces. This is the printed image =>

This is the downloaded image =>

the code snippet of what i am using is =>

  const pdfOptions = {
    margin: 0,
    filename: "Resume.pdf",
    image: { type: "jpeg", quality: 0.98 },
    enableLinks: true,
    scale: 2,
    html2canvas: {
      scale: 4,
      useCORS: true,
    },
    jsPDF: { unit: "mm", format: "a4", orientation: "p", putOnlyUsedFonts: true, precision: 0 },
    pagebreak: { mode: ["avoid-all", "css", "legacy"] },
  };
  const handleDownload = useReactToPrint({
    content: () => componentRef.current,
    documentTitle: "Resume",
    copyStyles: true,
    print: async (printIframe: HTMLIFrameElement) => {
      const pdfdoc = printIframe.contentDocument;
      if (pdfdoc) {
        const html = pdfdoc.getElementsByTagName("body")[0];
        try {
          const html2pdf = (await import("html2pdf.js")).default;
          await html2pdf().set(pdfOptions).from(html).save();
        } catch (error) {
          console.error("Failed to load html2pdf.js", error);
        }
      }
    },
    onAfterPrint: () => {
      try {
        console.log("Downloaded");
      } catch (e) {
        console.error(e);
      }
    },
  });

[gregg-cbs]

I am seeing this too...

HTML SCREENSHOT:

PDF SCREENSHOT:

[Basnetsuman4]

https://github.com/niklasvh/html2canvas/issues/2775#issuecomment-1204988157 try this, worked for me