New html-method

[eKoopmans]

Existing jsPDF plugins

Hi, I've been working on a new html2pdf package that uses html2canvas + jsPDF to convert HTML content to PDF. I know there are already three existing jsPDF plugins for HTML: addHTML, fromHTML, and html2pdf (same name). I don't want to step on any toes - from what I can tell:

• fromHTML is the oldest plugin and renders the HTML directly to PDF (which is great), but its support for complex HTML/CSS is lacking.
• addHTML is newer (but now deprecated) and uses html2canvas/rasterizeHTML to create a canvas, then puts the image onto the PDF page. Current state is described at How to get forward production with html2pdf / addHtml #944.
• html2pdf: I haven't found much info (apart from the demo), but it looks like it renders directly to PDF like fromHTML, which again is great but runs the risk of poor HTML/CSS support.

New html2pdf package

My html2pdf package takes the same approach as addHTML - I convert to a canvas with html2canvas, split that image up into pages, and attach each image onto its own PDF page. I believe it has some advantages over the jsPDF plugins:

• Easier to use - creating a PDF from an HTML element/page/string is one line: html2pdf(element);
• Fits content to the page - it copies the HTML first into an (invisible) container div with the PDF page width, so that content can resize appropriately (also working on a 'shrink-to-page' option)
• Supports page-breaks - a feature that comes up a lot, i.e. Add automatic page breaks in HTML and text functions #190
• Is external - it keeps the logic separate and can respond more readily to updates in both repos (including html2canvas internally in jsPDF causes some problems)
• Is external (disadvantage) - it can't be used inline with other jsPDF commands the way the current plugins are - it's a standalone package that creates and closes the PDF.

Open issues

That said, I've found 48 open issues on jsPDF that I think html2pdf could resolve, but I don't want to start pushing html2pdf if it conflicts with jsPDF's internal implementations. @MrRio @Flamenco I'd appreciate your feedback!

[Flamenco]

My first reaction would be to:

1. List the end user's usage needs and issues.
2. Write an API
3. Let each vendor implement the API
4. Let the user choose the implementation they want.

This way each implementation will have a standardized usage and documentation.

The main issues I have seen are related to Pagination, Image Quality, CORS, Scaling, Tables, SVG integration, and Font handling.

[eKoopmans]

Thanks @Flamenco, I appreciate the feedback. I think I could rework my package to have an API that could be used within jsPDF, in the same manner as addHTML.

And thanks for the list of common issues! Here's my status on those:

• Pagination: pages break automatically, with margins, and you can add custom page-breaks with the html2pdf__page-break class
• Image Quality: I have an open pull request on html2canvas to add custom resolution, which is accessible through html2pdf
• Scaling: good point, right now it just uses the HTML initial sizes
• Tables, SVG, Fonts: relies on how well html2canvas does each, which is mostly "not bad"
• CORS: again depends on html2canvas, which doesn't support CORS (root problem is with canvases themselves). Don't know any way around that one

[Flamenco]

The CORS issue could be solved with a proxy handler that gets the image from a server-side request. I'm sure countless hours have been wasted in users fighting that issue...

There are DATA URI issues that also affect image quality. Also, the user might want to scale image resolution, or suppress them.

For pagination, I am thinking more about the API. E.G. How does the user declare IF and WHERE they want breaks, not HOW the implementation chooses to do so. Many issues are because the user scrapes a site that does not have elements with CSS indicators, or long tables that will not fit.

[Flamenco]

Once a nice API is ready, it will be trivial to wrap the existing implementations in them. They could reuses an abstract pagination and image logic as well.

[eKoopmans]

Hah I may have just the thing for the CORS issue, I'll have to tinker around with it when I have the chance. I'll think about your suggestions for pagination and image quality. Thanks again!

[Flamenco]

A simple image callback that is registered will suffice, but it means the render call will need to be async.

[raghbendra2015]

Is it fixed now and all features are available in jsPDF or still have some issues .?

Because I am facing these three still:

Pagination: pages break automatically, with margins, and you can add custom page-breaks with the html2pdf__page-break class

Image Quality: I have an open pull request on html2canvas to add custom resolution, which is accessible through html2pdf

Tables, SVG, Fonts: relies on how well html2canvas does each, which is mostly "not bad"

I am using below code:

$(function() {
    $('#download_as_pdf').click(function() {
        var pdf = new jsPDF('lanscape');
        var options = { pagesplit: true,'background': '#fff' };
        pdf.addHTML($('#customer_report_section'), options, function() {
            pdf.save("<?php echo $username . ".pdf"; ?>");
        });
    });
});

[eKoopmans]

Hi @raghbendra2015, I haven't worked any of these changes into jsPDF yet, but I will soon! I was describing fixes I've made in my separate package, html2pdf, but @Flamenco suggested changing that package so it could be incorporated directly into jsPDF. And I'm almost ready to do that!

[raghbendra2015]

@eKoopmans, thanks for your reply I am using below code which is updated:

    $('#download_as_pdf').click(function() {;
        var pdf = new jsPDF('p', 'pt', 'a4'); // basic create pdf
        pdf.internal.scaleFactor = 4; // play with this value

        pdf.addHTML(document.getElementById('customer_report_section'), {pagesplit: true, retina: true, background: '#fff'}, function () { // addHtml with automatic pageSplit
            //var out = pdf.save('dataurlnewwindow');
            // output format of your pdf -> there are a lot blob, base64....
            pdf.save("<?php echo $username . ".pdf"; ?>");
        });
    });

But Facing the same issue regarding the format so is there any other way to handle this or I should go for other options, please suggest if we can fix it.
AB Mauri (3).pdf

[eKoopmans]

For now I would recommend trying html2pdf, and make sure to use the versions of the dependencies included in the vendor directory there. You can create a PDF from your component like so:

html2pdf(document.getElementById('customer_report_section'));

[rahulbussa]

@eKoopmans Thanks for great plugin , but i am not able to generate pdf for large html data.Any help

[eKoopmans]

Hi @rahulbussa, html2pdf currently relies on html2canvas to generate an image from the HTML. Take a look at the issues there, I know there have been other concerns with slow performance/etc. Good luck!

[marc-y-marc]

@eKoopmans

Dear sir,
It is again proven that not all hero's wear a cape these days (or do you? ;-).

My god, you have done an amazing job in simplifying this whole struggle to generate PDF's from HTML via javascript. I have had so many issues untill i came across this post.

Thank you so much mister!

[eKoopmans]

You're welcome, citizen! Hah no capes, but I'm always happy to help. Take it easy.

[gpatki]

Hello!

I have a query regarding stylesheet support.
I have css linked in the html that I would be passing for conversion.
Will the generated pdf pick these up?
Please do point to any link with example for the same if any.
Currently my pdf is generating without the styles.

Thanks in advance!