I have to print a web page, which is longer than a regular A4 page, from a web app (so basically I need to create a pdf that display ALL my web page in multiple pdf pages). Currently I'm using html2canvas+jsPDF; on chrome they work fine. The problem is that I also need them to work on IE11 and possibily IE9 (I've already solved the "promise" problem by using polyfill).
On IE the function do print the document, but only the first part of the web page (what the user see without scrolling down).
Here is the code:
<script src="${pageContext.request.contextPath}/jsp/shared/silef2/lib/jsPDF/polyfills.es.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jsp/shared/silef2/lib/jsPDF/jspdf.es.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jsp/shared/silef2/js/html2canvas.js" type="text/javascript"></script>
<script>
function functionPrint() {
html2canvas(document.getElementsByTagName("html"),{
onrendered:function(canvas){
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( 'file.pdf');
}
});
}
</script>
<button onclick="functionPrint();">STAMPA</button>
Unfortunately the console doesn't give me back any error. I suppose there is some kind of incompatibility between jsPDF and IE.
I've discovered that IE11 has the property "overflow: hidden" by default so, before printing, you need to override that property manually like this:
<script>
function functionPrint() {
document.getElementById("main").parentNode.style.overflow = 'visible'; <-- THIS
html2canvas(document.getElementsByTagName("html"),{
onrendered:function(canvas){
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( 'file.pdf');
}
});
}
</script>
It only works with getElementById so you need to identify exactly which element compose your page as a whole.