es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error al intentar generar un jspdf con html2canvas.

29 Jul, 2023 Programación

Estoy utilizando React y estoy tratando de crear un PDF con html2canvas y jspdf.
Quiero proporcionarle a html2canvas un

<

div> que creo en ese momento.
Cuando intento crear el PDF, obtengo este error:

“` index.ts:36 Uncaught (in promise) Error: Elemento no está adjunto a un documento

<pre><code><br />Aquí está el código:

“` const input = (&lt;div&gt;&lt;h2&gt;Prueba&lt;/h2&gt;&lt;/div&gt;);
html2canvas(input).then((canvas)=&gt;{
const imgData = canvas.toDataURL(&#39;image/png&#39;);
const pdf = new jsPDF();
pdf.addImage(imgData, &#39;JPEG&#39;, 0, 0);

pdf.save(&quot;descargar.pdf&quot;)
})

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el mensaje de error indica que el elemento <div> no está adjunto al documento. Esto puede ocurrir si se crea el elemento pero no se agrega al DOM.

    Para solucionar este problema, asegúrate de que el elemento <div> se agregue al documento antes de pasarlo a html2canvas. Puedes hacer esto apendizando el elemento al cuerpo o a un elemento contenedor que ya esté en el documento.

    Aquí tienes un fragmento de código actualizado:

    const input = (<div><h2>Test</h2></div>);
document.body.appendChild(input); // añade el elemento al cuerpo

html2canvas(input).then((canvas)=>{
  const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'JPEG', 0, 0);

    pdf.save("download.pdf")
})

    Esto debería solucionar el error y permitirte generar el PDF usando html2canvas y jspdf.

Comments are closed.