jsPDF addHTML method not working with no error message

问题

I was using the example from jsPdf official demo site to test the new addHTML function, with a little change to directly save the PDF generated.

console.log("testing");
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
    console.log("started");
    pdf.save()
    console.log("finished");
});
console.log("testing again");

When I run the script above, it generates no error message but also no PDF is generated. In the console, only "testing" and "testing again" is shown, so I guess the script is not run.

What have I missed? And I am using bootstrap tab function and some chart generated using highchart. Is it too complicated for jsPDF to handled?

回答1:

First, you need either html2canvas or rasterizeHTML to use the addHTML method of jsPDF. The further problem is that jsPDF overwrites many of the methods defined by html2canvas library. Just look at the jsPDF source code and search for html2canvas. I encountered the exact same problem that you describe even after including the html2canvas script in my project.

The final issue is the order of including the scripts. For me it works with the current version of jsPDF (1.1.239) and html2canvas (0.5.0-alpha1) when including jsPDF first and html2canvas afterwards. In my project it looks like this:

<head>
    <script src="./lib/jspdf/jspdf.debug.js"></script>
    <script src="./lib/html2canvas/html2canvas.js"></script>
    <!-- more includes ... -->
</head>

I think the overwriting of html2canvas methods in jsPDF is bad practice, because it is hard to maintain when html2canvas changes, as this problem shows.

Maybe this problem behaves differently when script including is done via RequireJS.

回答2:

This is because the callback function has been changed to promise.

Do the following change.

pdf.addHTML(document.body,function() {
    console.log("started");
    pdf.save()
    console.log("finished");
});

pdf.addHTML(document.body).then(()=> {
    console.log("started");
    pdf.save()
    console.log("finished");
});

回答3:

jspdf cannot convert svg elements. This can be easily done using this library.

Example usage -

function _svgToCanvas() {
    var nodesToRecover = [];
    var nodesToRemove = [];

    var svgElems = document.getElementsByTagName("svg");

    for (var i = 0; i < svgElems.length; i++) {
        var node = svgElems[i];
        var parentNode = node.parentNode;
        var svg = parentNode.innerHTML;

        var canvas = document.createElement('canvas');

        canvg(canvas, svg);

        nodesToRecover.push({
            parent: parentNode,
            child: node
        });
        parentNode.removeChild(node);

        nodesToRemove.push({
            parent: parentNode,
            child: canvas
        });

        parentNode.appendChild(canvas);
    }
}

And then -

var pdf = new jsPDF('p', 'px', 'a4');
var options = {
    pagesplit: true
};
pdf.addHTML($('body'), 0, 0, options, function () {
     console.log("done");
     pdf.save('test.pdf')
  });

来源：https://stackoverflow.com/questions/28807755/jspdf-addhtml-method-not-working-with-no-error-message

标签

javascript

twitter-bootstrap

Highcharts

jspdf