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 plicated for jsPDF to handled?
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 plicated for jsPDF to handled?
Share Improve this question edited Mar 2, 2015 at 16:22 amphetamachine 30.6k12 gold badges67 silver badges74 bronze badges asked Mar 2, 2015 at 10:40 cytsunnycytsunny 5,03017 gold badges73 silver badges137 bronze badges 3- I'm not sure if jsPDF is supporting SVG, which is used in Highcharts. Take a look: issue #204, issue #384 and issue #437. – Paweł Fus Commented Mar 2, 2015 at 13:13
- Thanks, but even if they don't support SVG, no error message is really confusing. – cytsunny Commented Mar 3, 2015 at 2:07
- I fully agree with you. Last mit they made 25days ago, so good thing it's not an abandoned project ;) – Paweł Fus Commented Mar 3, 2015 at 10:19
4 Answers
Reset to default 7This 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");
});
to
pdf.addHTML(document.body).then(()=> {
console.log("started");
pdf.save()
console.log("finished");
});
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.
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')
});
Had the same problem. Although I am not sure what the exact problem with addHTML is, I managed to get it to work using html2canvas:
html2canvas(document.body).then(canvas => {
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 210, 297);
pdf.save();
});