0

Al generar el pdf mediante jsPDF y html2canvas, genere un pdf cortado, es decir, no toma todo el ancho de la web. ¿Qué sucede?

Anchura de pdf generado:

introducir la descripción de la imagen aquí

javascript:

<script type="text/javascript">

const { jsPDF } = window.jspdf;
  function genPDF() {
        html2canvas(document.getElementById("testDiv"),{
            onrendered: (canvas)=>{
                var pdf = canvas.toDataURL("image/png");
                
                const doc = new jsPDF('p', 'pt', 'a4');
                doc.addImage(pdf, 'JPEG',1,1);
                doc.save('test.pdf');
            }
        });
    }
</script>

template:

<div class="container w-100" id="testDiv">

    
    <div class="row">
        <div class="col-lg-12 col-md-8">
            <div class="text-right">
                <button onclick="genPDF();">genPDF </button>
            </div>
        </div>
    </div>

    <!--TITLE-->
    <div class="row">
        <div class="col-lg-12 col-md-12">
            
            <div style="background-color:rgba(54, 162, 235, 0.5)" class="alert alert-primary text-white" role="alert">
                <h2 class="text-dark">Estadística Mantenimiento Preventivo</h2>
...
            </div> 
         </div>
     </div>

1 respuesta 1

0

Aunque no tengo claro el funcionamiento, he encontrado por ahí un código que parece ser que toma la anchura del pdf como valor para generar el pdf:

Javascript:

<script type="text/javascript">

const { jsPDF } = window.jspdf;
  function genPDF() {
        html2canvas(document.getElementById("testDiv"),{
            onrendered: (canvas)=>{
                var pdf = canvas.toDataURL("image/png");
                
                var doc = new jsPDF("p", "mm", "a4");

var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
                
doc.addImage(pdf, 'JPEG', 0, 0, width, height);
                doc.save('test.pdf');
            }
        });
    }
</script>

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.