Estoy trabajando en una función que toma el contenido de un modal Bootstrap, lo guarda en un PDF y descarga el archivo en mi PC local.
Aquí hay un extracto de mi archivo HTML y listItem.js
function downloadPDF() { // some stuff html2canvas($("#printItems")[0], { allowTaint: true }).then(function(canvas) { var imgData = canvas.toDataURL('image/jpeg, 1.0'); var pdf = jsPDF({ unit: 'mm', format: 'a4', orientation: 'portrait' }); pdf.addImage(imgData, 'jpeg', 15, 2); pdf.save('test.pdf'); }); } <div class="modal-body" id="printItems"> <div class="container" id="selectedItems"></div> </div> <script type="text/javascript" src="/library/html2canvas.min.js"></script> <script type="text/javascript" src="/library/jspdf.min.js"></script> El problema que tengo es cuando pdf.save('test.pdf') la función falla y aparece el siguiente error:
No capturado (en promesa) TypeError: l (...). createObjectURL no es una función
No estoy seguro de lo que estoy haciendo mal aquí. Además, estoy trabajando con la versión 1.5.3 de jsPDF y 1.1.4 de html2canvas
Este fue un problema muy extraño, pero descubrí qué estaba mal y realmente no tenía nada que ver con las versiones jspdf o html2canvas que estaba usando. Por alguna razón, a jspdf no le gustó que hiciera referencia a una URL en dos de mis otros scripts. Una vez que eliminé las URL reales (https) y solo tuve la ruta física, funcionó bien. Estaba yendo por el camino equivocado buscando versiones y descubriendo diferentes formas de escribir una promesa. LOL y SMH
El código que publiqué arriba funciona ahora.
Intenté esto y parece funcionar sin ningún problema. verifique las versiones que usé de CDN en el siguiente fragmento.
Creo que @Rory McCrossan tiene razón acerca de probar nuevas versiones.
<html> <header> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script> </header> <body> <div class="modal-body" id="printItems"> <div class="container" id="selectedItems"> Some Text...</div> </div> <script> function downloadPDF() { html2canvas($("#printItems")[0], { allowTaint: true }).then(function (canvas) { var imgData = canvas.toDataURL('image/jpeg, 1.0'); var pdf = new jspdf.jsPDF({ unit: 'mm', format: 'a4', orientation: 'portrait' }); pdf.addImage(imgData, 'jpeg', 15, 2); pdf.save('test.pdf'); }); } downloadPDF() </script> </body> </html>