Different Styles in PDF

[Vaib215]

I getting different styles in Original & PDF. Please tell me urgent solution or workaround.

These are the config I am using:

const ResumePDFButton: React.FC<ResumePDFButtonProps> = ({ resumeRef }) => {
  const downloadPDF = () => {
    const element = resumeRef.current;

    if (!element) return;

    const options = {
      margin: [8, 16, 16, 0],
      filename: "resume.pdf",
      image: { type: "jpeg", quality: 0.98 },
      html2canvas: { scale: 2, letterRendering: true },
      jsPDF: {
        unit: "pt",
        format: "letter",
        orientation: "portrait",
      },
      pagebreak: { mode: ["avoid-all", "css", "legacy"] },
    };

    // @ts-ignore
    import("html2pdf.js").then((html2pdf) => {
      const pdf = html2pdf.default();
      pdf
        .from(element)
        .set(options)
        .outputPdf("datauristring")
        .then((data: string) => {
          const link = document.createElement("a");
          link.href = data;
          link.download = "resume.pdf";
          link.click();
          link.remove();
        });
    });
  };

  return (
    <button onClick={downloadPDF} className="bg-blue-600 text-white p-2">
      Download PDF
    </button>
  );
};

Original

PDF

[umaraziz0]

Can confirm, I'm having the same issue. Using TailwindCSS for my styling.

[ch3nx1]

maybe it's caused by tailwind, I resolved it through set @layer base { img { display: initial; } } in main.css you can find more discussions in here: https://github.com/niklasvh/html2canvas/issues/2775#issuecomment-1204988157