Soy nuevo en JavaScript y trato de agregar un botón que exporta un PDF con 2 imágenes y algo de texto con un solo clic.
A continuación se muestra el código que tengo actualmente, sin embargo, solo funciona cuando hago doble clic en el botón.
¿Cómo puedo hacer que esto funcione con un solo clic?
<div class="radarChartBox"> <canvas id="radarChart"></canvas> <button id="downloadPDF" onclick="downloadPDF()">download PDF.</button> </div> <script> function downloadPDF() { const canvas = document.getElementById('radarChart'); const canvasImg = canvas.toDataURL('image/jpeg', 1.0); const bannerImg = new Image; bannerImg.src = "https://slipstreamgroup.com.au/wp-content/uploads/2022/03/Banner-img.jpeg"; let pdf = new jsPDF(); pdf.setFontSize(24); pdf.setTextColor(255, 255, 255); pdf.addImage(bannerImg, 'JPEG', 0, 0, 210, 55, "alias1"); pdf.text(10, 25, 'Your ' + formTitle); pdf.addImage(canvasImg, 'JPEG', 10, 60, 190, 190, "alias2"); pdf.save(firmName + " " + formTitle + ".pdf"); } </script>Su código no es realmente reparable, ya que no es normal como un ejemplo mínimo de ejecución de un problema, ya que tiene variables indefinidas y fragmentos de código por todas partes sin estructura <html><head><style><body> .
Con mucho, la forma más sencilla es usar las demostraciones y la documentación para ver las posibilidades, de modo que el sistema de trabajo completo sea un archivo ziphttps://github.com/parallax/jsPDF/archive/refs/heads/master.zip , descomprimir y ejecutar jsPDF-master/jsPDF-master/index.html (puede tomar unos segundos ya que hace mucho) para probar la demostración fuera de línea y luego recortarla para simplemente emular el botón como en esa página. así que aquí cambié el ejemplo estándar para duplicar la imagen de demostración y barajar el texto. la descarga funciona en un clic