javascripthtmlcsspdfhtml2pdf

Problem with html2pdf using javascript rendering <h1> elements putting on wrong place


I've am working on this project and I want to make a pdf export. The problem is probably in scaling and I really need help.

Below are pictures from html and the problem. On the html picture you can see how organized it is and nicely looking but when html2pdf renders it and sets its own scale it becomes unreadable and unogranized.

JS Function:

     function pdf() {
      
       var element = document.getElementById('hello');
        var opt = {
          margin:       1,
          filename:     'myfile.pdf',
          image:        { type: 'jpeg', quality: 0.98 },
          html2canvas:  { scale: 2 },
          jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
        }; html2pdf().set(opt).from(element).save(); }

I need it in a4 format and that it doesnt create theese problems below:

How html looks like:

html site

The occuring problems:

"Pregdled" cant be seen from html site

What to do?


Solution

  • I solved the problem.

    Explanation:

    When the html2pdf is rendering html site the best way to render is by setting width as percentage (%)

    for example:

    In my case

    Pregled

    had css width: 80vw; so i changed it into width: 100%;

    Hope someone finds this useful :)