.html() function bug

[tj0218]

I am using jsPDF module in angular 7 for rendering my page to a new pdf file. Here is some code snippets you can check.

@ViewChild('pdf') pdf: ElementRef;

var doc = new jsPDF('p', 'pt', 'a4');
const pdfTable = this.pdf.nativeElement;
doc.html(pdfTable, {
  callback: function(doc) {
  doc.save('tableToPdf.pdf');
 }
});

and here is the div element i was trying to render for testing.

<div class = "pdf" id="pdf" #pdf>
  <label>test</label><br>
  <label>test</label><br>
  <label>test</label><br>
  <label>test</label><br>
  <label>test</label><br>
  <label>test</label><br>
  <label>test</label><br>
  <label>test</label><br>
</div>

the problem is that when the div content is over one page, pdf shows a strange margin on the top of the first page. I have attached a screenshot for some insights.
screenshot

For some reasons, I must use html function and i can't use other functions such as addHTML() or fromHTML().

Why do i have this strange margin? Is there any solution to avoid this issue?

Please help me if you have some solutions. Thanks in advance.

[gentios]

+1 I have the same problem with Angular 8 @lbravodev

[mightymietz]

+1 same

[donqq]

I guess this library is broken. I have stumbled upon a couple of problems already, and I did download it today.

[shortdark]

If it's any help, I had more success with getting HTML into a PDF with html2pdf (which uses jsPDF) than I did by putting it straight into jsPDF.

[Mikhail-MM]

I gave up trying to use this library, it looks bugged and not really well supported anymore. Just use puppeteer running on NodeJS server and take PDF screenshot of the page. It's much easier than using this. You do need a server

[HackbrettXXX]

We are currently working on making the html function work again - stay tuned. Meanwhile you can try using html2canvas 1.0.0-rc1 instead of rc5.

[tj0218]

@Mikhail-MM , seems like puppeteer is the best choice for now.
I guess that since it takes screenshots of pages, we won't be able to select texts inside it. right?

[Mikhail-MM]

But guys, the html function just throws an error in this library when following the current documentation. The dependencies are not injected with the library, and even when you globally expose html2canvas, there are still bugs. It's just not worth it.

@lbravodev Chrome has the ability to save an entire HTML page as a PDF. It's not just a screenshot, it's a full PDF. You can select text, you can click links. If the devs of this library are converting HTML to a Canvas before turning to PDF, you lose all of that. Puppeteer is really the way to go. And it is VERY easy...

https://blog.risingstack.com/pdf-from-html-node-js-puppeteer/

It has a page.pdf() function...this is all you need.

[kakugiki]

Looks similar to the margin-top issue when using html2canvas v1.0.0-rc.5 on issue #2766. Not sure pr #2817 will help.

Some mentioned html2pdf above. One thing I don't like is that the PDF file generated using html2pdf is not text searchable.

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[donqq]

Just got a notification of the above action. I want to say this works fine. I have successfully used it in a project.

[HackbrettXXX]

Ok, then I'm gonna close this.