Tengo que imprimir una página web, que es más larga que una página A4 normal, desde una aplicación web (así que básicamente necesito crear un pdf que muestre TODA mi página web en varias páginas pdf). Actualmente estoy usando html2canvas+jsPDF; en cromo funcionan bien. El problema es que también los necesito para trabajar en IE11 y posiblemente en IE9 (ya resolví el problema de la "promesa" usando polyfill).
En IE, la función imprime el documento, pero solo la primera parte de la página web (lo que el usuario ve sin desplazarse hacia abajo).
Aquí está el código:
<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>Lamentablemente la consola no me devuelve ningún error. Supongo que hay algún tipo de incompatibilidad entre jsPDF e IE.
Descubrí que IE11 tiene la propiedad "desbordamiento: oculto" de forma predeterminada, por lo que, antes de imprimir, debe anular esa propiedad manualmente de esta manera:
<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> Solo funciona con getElementById , por lo que debe identificar exactamente qué elemento compone su página como un todo.