Jspdf: Callback Function Not Called - addHTML & fromHTML

Created on 14 Mar 2018 · 8Comments · Source: MrRio/jsPDF

Thank you for submitting an issue to jsPDF. Please read carefully.

jsPDF Version
1.3.5

Have you tried using jspdf.debug.js?
Yes, currently using it.

Steps to reproduce

var doc = new jsPDF();
doc.fromHTML(document.getElementById("chip"), function(){
            console.log("Callback");
           doc.save('test.pdf');
})

If I use addHTML instead, I get the same issue. I see the canvas object being rendered

0ms html2canvas: html2canvas 1.0.0-alpha.10
189ms html2canvas: Canvas renderer initialized (1746x32 at 174,437) with scale 1

But the callback function is still not called.

http://jsbin.com/qamececego/edit?html,js,output

What I saw
Callback function is not called. Console.log not executed and pdf not saved.

What I expected
Callback function to be called.

Source

ewaschenko

👍2

All 8 comments

you are calling it completely wrong.

but they are also missing documentation.

fromHTML( element.innerHTML, xAxis, yAxis, { options and settings (which I dont know)}, callback HERE! )

so it would be your 5th parameter you are trying to call it on the second... probably getting an error.

gonzaRey on 21 Mar 2018

👎10 👍1

@gonzaRey

file: https://github.com/MrRio/jsPDF/blob/master/plugins/addhtml.js

    jsPDFAPI.addHTML = function (element, x, y, options, callback) {
        'use strict';

        if(typeof html2canvas === 'undefined' && typeof rasterizeHTML === 'undefined')
            throw new Error('You need either '
                +'https://github.com/niklasvh/html2canvas'
                +' or https://github.com/cburgmer/rasterizeHTML.js');

See here:

        if(typeof x !== 'number') {
            options = x;
            callback = y;
        }

and here:

        if(typeof options === 'function') {
            callback = options;
            options = null;
        }

and here:

        if(typeof callback !== 'function') {
            callback = function () {};
        }

SunboX on 29 Mar 2018

@ewaschen

I have the same issue... looks like html2canvas changed the API to return a Promise instead of using the callback from the options.

If I use the (old) html2canvas library from this GH project, it works:
https://github.com/MrRio/jsPDF/blob/master/libs/html2canvas/dist/html2canvas.js

SunboX on 29 Mar 2018

I think it works if you just use the return value like a promise:

    doc.addHTML(container, {pagesplit: true}).then(() => {
        // do callback stuff
    }

I say "think" because I'm currently getting a blank PDF, but I suspect that's a different issue altogether; the callback really is getting called.

dusty-phillips on 29 Mar 2018

@SunboX Thanks for the reply. But I've decided to go with the simpler alternative of passing the styled HTML to a new window and printing / saving as PDF there. Also, the html2canvas only captures as a picture when I would like the actual HTML saved.

ewaschenko on 29 Mar 2018

@ewaschenko Is there any way you could share your solution? I'm dealing with this issue at the moment.

jpayan on 14 May 2018

@jpayan I'm using Angular with Angular Material.

I have my nice material table but it doesn't support printing and I can't pass the material js & css to the print window so what I do is.

Have a hidden component with a simple bootstrap table that gets fed the same data as the material table.
When I want to print, I select the hidden component and pass it to the print window along with bootstrap css.

print(element: HTMLElement, title: string): void{
        let printWindow = window.open("");
        element.hidden = false;

        printWindow.document.write('<html><head><link rel="stylesheet"  href="../assets/bootstrap.css"></head><body>');
        printWindow.document.write(element.outerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.title = title;

        element.hidden = true;

        // Allow Timeout To Apply CSS
        setTimeout(() => {printWindow.print();printWindow.close();},500);
 }

ewaschenko on 14 May 2018

👍1

It seems the addHTML function is deprecated. Here is another way to create PDF file.

html2canvas(document.body).then(canvas => {
    let pdf = new jsPDF('p', 'mm', 'a4');
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
    pdf.save(filename);
});

I can get rendered pdf file with above code, but there are still some small style issues yet.
So finally I removed jsPDF library, however I will check if this library will be improved later as well.