UI bug when use html2pdf.js

[phanvohieunghia]

I use nextjs lastest version
When I import @import "tailwindcss"; and export pdf file by html2pdf.js line-height of each elements is wrong
Please help me how to fix this issue?

[Tiimie1]

Tailwind applies line-height: 1.5 by default to most elements, but during pdf generation html2pdf.js can interpret these values differently.

I would suggest you clone the document that you are trying to export as pdf and add specfic line height styles to the elemenets before generation

import html2pdf from 'html2pdf.js';

const exportPDF = () => {
  const element = document.getElementById('pdf-content'); // clone to avoid modifying the original
  const clone = element.cloneNode(true);
  clone.style.lineHeight = 'normal';   // or target specific elements...
  
  const opt = {
    margin: 10,
    filename: 'document.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
  };
  
  html2pdf().set(opt).from(clone).save();
};