CODEWITHSUNDEEP
tailwind-cssjspdfhtml2canvasdaisyui
Ngalla Juke
Ngalla Juke

Reputation: 21

Html2canvas push text outside of con

I have a simple div with a paragraph in it. when the pdf is generated, the paragraph is pushed down outside the div I'm also using DaisyUI

<div class="bg-blue-50">
        <p class="text-xs">
          Placeholder for PDF Page BODY
        </p>
</div>

here is the code for generating the pdf from jspdf

export async function eyeReportToImage(eye: string) {
  const report = document.getElementById('pdf-report')
  if (!report)
    throw new Error('Report element not found')

  const pdfPageElement = document.getElementById(`my-pdf-page`)
  if (!pdfPageElement)
    throw new Error(`PDF page element not found  `)

  try {
    report.classList.remove('hidden')
    const canvas = await html2canvas(pdfPageElement, {
      scale: 3,
      width: 800,
      height: 1100,
      windowWidth: 800,
      windowHeight: 1100,
      useCORS: true,
      logging: false,
    })
    report.classList.add('hidden')
    return canvas.toDataURL('image/jpeg', 1)
  }
  catch (error) {
    report.classList.add('hidden')
    throw error
  }
}

How it looks on the page How it looks on the page how it looks on the pdf how it looks on the pdf

I tried a bunch of stuff but can't make it move

Upvotes: 0

Views: 290

Answers (1)

Anas Dweik
Anas Dweik

Reputation: 1

Try this, it may solve your issue.

const downloadPdf = () => {
  // Create a new <style> element and append it to the document's <head>
  const style = document.createElement('style');
  document.head.appendChild(style);

  // Insert a CSS rule to ensure images are displayed inline-block
  style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');`enter code here`

  // Use html2canvas to capture the desired HTML element
  html2canvas(element).then(canvas => {
    // Remove the temporary style element to clean up the DOM
    style.remove();

    // Continue with your PDF generation logic here
    // For example, you could convert the canvas to a PDF using jsPDF
  });
};

The CSS rule body > div:last-child img { display: inline-block; } ensures that images within the specified container are displayed as inline-block elements. This helps maintain the correct layout and prevents rendering issues during the canvas capture process.

Upvotes: 0

Related Questions