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 #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. #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!

[SorenV]

@eKoopmans Thank you for your work on this! Looking at your fiddle it seems the jsPDF constructor default unit of 'mm' is what is causing the weird spacing.

var doc = new jsPDF('p', 'pt', 'letter');

I'm still working through familiarization with the docs, but it currently isn't clear to me how the unit value affects the document elements. For instance, 'pt' looks right, but 'px' and 'mm' both do not. You know more about the internals so I thought I would bring this to your attention. Thanks again!

[umbe1987]

First of all, thanks for this amazing project! Is it possible to resize the HTML div passed to .html() and not having it to fit the entire PDF page? My goal would be to add a table elem beside an image. Was looking in the options, but could not find anything related to (e.g.) width, or height.

[Uzlopak]

@eKoopmans I am right now reorganizing my life and have not much capacity to do this until the beginning of next month. But I am aware of your request.

[eKoopmans]

Hi @arasabbasi, understood - I know how that goes. And @SorenV thanks, that was a helpful direction to look!

I can tell now what the issue is (same thing that was reported by @Peppe87 before me). Units are getting applied incorrectly. I have made a new issue #2294 to follow up.

[JordWyatt]

Has anybody else experienced issues with the callback option of the new html method not being executed when using Bluebird? From playing around with local examples using native promises results in the callback executing as expected, but when using Bluebird it fails silently.

This may be coincidental but it is the only change I am making which causes the CB to fail.

Edit:

I've narrowed this down as an issue with using Bluebird promises.

I modified jspdf.debug.js to take a 'promise' argument:

 jsPDFAPI.html = function (src, options) {
      ...
      Promise = options.promise || Promise
      ...
    };

And then passed in an alternative implementation (es6 Promise in this case) into the options object

 doc.html(anchor, {
    promise: es6Promise.Promise,
    callback: function(pdf) {
      pdf.save("test.pdf");
    }
  });

Passing in bluebird's Promise object results in the callback not being called.

[Chedvaka]

Hi, I am using the library and I have one problem: when I trying to print in Asian language I get something like this vî ŒÇŠ ˜¨ –ª {I } •USÍe? {V šØ N-^¦ Nãx¼[Æ^¦ f S×e; dÊv„ Even though I added the font to the jspdf.

[Uzlopak]

@Chedvaka Supply a working test case...

[pedrovsp]

Is there any work towards setting margins to the pdf? All the solutions I've seen so far consists in inserting an image with margins into the pdf, which I don't think is the optimal approach since the file size increases significantly.

[vinodsamy]

How to convert gibberish pdf raw data to original pdf file: %PDF-1.3 %ºß¬à 3 0 obj <</Type /Page /Parent 1 0 R /Resources 2 0 R /MediaBox [0 0 595.28 841.89] /Contents 4 0 R

endobj 4 0 obj << /Length 10

stream 0.20 w

[mateuszrusiecki]

@pedrovsp Did you try to use fromHTML and set margins there? For example:

var htmlString =" some html ";
var doc = new jsPDF('landscape','pt');
doc.fromHTML(htmlString,10,10,{}, {}, {
    top: 10,
    bottom: 10
});
...

[haseebuddin]

can i get help on this url while generating pdf it didnt show much positive outcome on pdf while using html2canvas https://testing.resumepagepro.com/, can i get some help for this . thanks if you want you can test it out by clicking the "Download as PDF" button

[saugatUNO]

Why is the font changing to the Times new roman when using html2pdf. I am using in Vue.js with vuetify, where the font is set to "Robot" , then sans-serif??

[Staremang]

@saugatUNO I had a similar problem. You have to to integrate a custom font (use fontconverter):

const font = '...'; // Halvar-Breitschrift-Bold-Web.ttf as base64
doc.addFileToVFS('Halvar-Breitschrift-Bold-Web.ttf', font);
doc.addFont('Halvar-Breitschrift-Bold-Web.ttf', 'halvar breitschrift', 'bold');

It's also important to make fontName in lower case (halvar breitschrift). Then these styles will work:

.text {
  font-family: 'Halvar Breitschrift', sans-serif;
  font-weight: bold;
}

[saugatUNO]

@Staremang Thank you for your reply. But I do not know how to integrate the custom font in my method. (I used fontconverter which gave .js file of the font) my function is {

var element = div
        var opt = {
            margin: 0,
            filename: filename,
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: {
                scale: 1.98,
                useCORS: true,
                optimized: false,
                allowTaint: false
            },
            jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }
        }

        html2pdf().from(element).set(opt).save()

}

[Zankhna95]

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!

I am also facing same issue. Is there any way to link css/scss file to this plugin? @eKoopmans

[github-actions[bot]]

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.

[austinjl]

I've yet to find a working solution for setting page margins. This is what I see in the documentation but it is not working for me

var pdf = new jsPDF('p', 'pt', 'letter'); pdf.html(document.querySelector('#render_me'), { callback: async function(pdf) { pdf.save('sample-file.pdf'); }, margin: [25, 50, 25, 50] });

http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html

[HackbrettXXX]

2924