1

Cuando estoy tratando de convertir mi html a pdf me sale un error en la libreria html2canvas error: error

Y este es mi JavaScript para renderizar en html2canvas y jsPDF

function btnPDF(){
    var doc = new jsPDF('p', 'pt', 'letter');
    var margin = 10;
    var scale = (doc.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
    doc.html(document.body, {
        x: margin,
        y: margin,
        html2canvas: {
            scale: scale, 
        },
        callback: function(doc){
            doc.output('dataurlnewwindow', {filename: 'examen.pdf'});
        }
    });
}
Este es mi codigo HTML

<center><div  class="container">
        <center><h1>Formulario</h1></center>
        <form class="form-duplicate" action="" method="post"><div class="formulario-dividido" id="formulario-dividido">
            <div class="inputs">
                <h6>Envio de datos</h6>
                <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="addon-wrapping">Nombre</span>
                    <input type="text" class="form-control" placeholder="Nombre" aria-label="Username" aria-describedby="addon-wrapping">
                  </div>
                  <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="addon-wrapping">Apellido</span>
                    <input type="text" class="form-control" placeholder="Apellidos" aria-label="Username" aria-describedby="addon-wrapping">
                  </div>
                  <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="addon-wrapping">Telefono</span>
                    <input type="text" class="form-control" placeholder="Telefono" aria-label="Username" aria-describedby="addon-wrapping">
                  </div>
                  <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="addon-wrapping">Contraseña</span>
                    <input type="password" class="form-control" placeholder="Contraseña" aria-label="Username" aria-describedby="addon-wrapping">
                  </div>
            </div>
            <div class="search">
                <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="addon-wrapping">Buscar</span>
                    <input type="text" class="form-control" placeholder="Buscar Solicitud" aria-label="Username" aria-describedby="addon-wrapping">
                  </div>
                <button type="button" onclick="btnPDF()" class="btn btn-primary" >Enviar</button>
            </div>
        </div></form>
        <div class="duplicates">

        </div>
        <button onclick="addProduct()" class="btn btn-primary">Nuevo paciente</button>
    </div></center>

Habia probado en otro documento y me funciona correctamente pero lo pruebo en el documento que lo necesito y me sale ese error.

Así estoy llamando el jsPDF y html2canvas también trate de cambiar la versión de ambas librerías y pasa exactamente lo mismo

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.js"></script>
2
  • ¿Podrías incluir el contenido del código HTML que estás tratando de renderizar? el 28 feb. 2022 a las 2:53
  • @C.Rodriguez Claro, acabe de editar y subí mi HTML el 28 feb. 2022 a las 14:12

1 respuesta 1

1

Este error ocurre cuando intentas dibujar un borde (dashed o dotted) con versiones inferiores a la 2.4.0 de jsPDF.

En la versión que usas de jsPDF, no existe la declaración de la función setLineDash en el Context2D del Canvas que es posteriormente utilizado por html2canvas para renderizar el PDF. Esta información es mencionada aquí y aquí

La función fue agregada a partir de la v2.0.4, así que para solucionarlo, utiliza una versión superior (se recomienda usar la más actualizada en la medida de lo posible).


Las librerías quedarían así:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.js"></script>

Y tu código quedaría así:

function btnPDF(){

    // Tomar en cuenta que la manera en que se accede al objeto se utiliza diferente en la versión UMD.
    // También podrías declarar jsPDF en una variable global y utilizarla aquí.
    var doc = new window['jspdf'].jsPDF('p', 'pt', 'letter');

    var margin = 10;
    var scale = (doc.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
    doc.html(document.body, {
        x: margin,
        y: margin,
        html2canvas: {
            scale: scale, 
        },
        callback: function(doc){
            doc.output('dataurlnewwindow', {filename: 'examen.pdf'});
        }
    });
}

Aquí tienes un ejemplo verificable

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.