0

El siguiente código, toma el ancho y alto del documento a4, pero en vez de utilizar todas las páginas que necesite, ajusta toda la web a una sola página a4 devolviendo como resultado lo siguiente (la idea es que ajuste al ancho de la web, pero que tome todas las páginas que necesite para que el contenido se vea bien):

Resultado pdf:

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");                
                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>

Al generar debería no cortar el contenido cuando se imprima. Generando margen supongo: introducir la descripción de la imagen aquí

(Sobre la palabra "señales" hay una linea que no se ha impreso...)

1
  • Lectura recomendada: es.meta.stackoverflow.com/a/4433/822 Punto 2 para ser exacto, edita la pregunta y agrega la información necesaria para reproducir tu escenario. Saludos :D
    – fredyfx
    Commented el 6 oct. 2020 a las 15:58

1 respuesta 1

3
+50

De acuerdo a como lo planteas, esta es la solución que yo generaría.

  • Sacar medidas de la imagen, completa.
  • Obtener Proporción en base a el tamaño de la hoja a4 que maneja JsPdf.
  • Hacer un ciclo y en cada iteración obtener ese fragmento de la imagen y añadirlo a una pagina de jsPdf.

Te dejo el código y un ejemplo funcional, explicado.

html2canvas(document.getElementById("testDiv"), {
        useCORS: true,
        onrendered: (canvas) => {
            let doc = new jsPDF("p", "mm", "a4");
            
            //Obtengo la dimensión en pixeles en base a la documentación
            // https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L59
            let a4Size = { w: convertPointsToUnit(595.28, 'px'), h: convertPointsToUnit(841.89, 'px') }

            /*Nuevo Canvas donde generare mis imágenes separadas*/
            let canvastoPrint = document.createElement('canvas');
            let ctx = canvastoPrint.getContext("2d");

            /* Medidas de mi hoja*/
            canvastoPrint.width = a4Size.w;
            canvastoPrint.height = a4Size.h;

            /* Tomo cuanto corresponde esos los 700 pixeles restantes de el total de mi imagen*/
            let aspectRatioA4 = a4Size.w / a4Size.h;
            let rezised = canvas.width / aspectRatioA4;
            
            let printed = 0, page = 0;
            while (printed < canvas.height) {
                //Tomo la imagen en proporcion a el ancho y alto.
                ctx.drawImage(canvas, 0, printed, canvas.width, rezised, 0, 0, a4Size.w, a4Size.h);
                var imgtoPdf = canvastoPrint.toDataURL("image/png");
                let width = doc.internal.pageSize.getWidth();
                let height = doc.internal.pageSize.getHeight();
                if (page == 0) { // si es la primera pagina, va directo a doc
                    doc.addImage(imgtoPdf, 'JPEG', 0, 0, width, height);
                }
                else { // Si no ya tengo que agregar nueva hoja.
                    let page = doc.addPage();
                    page.addImage(imgtoPdf, 'JPEG', 0, 0, width, height);
                }
                ctx.clearRect(0, 0, canvastoPrint.width, canvastoPrint.height); // Borro el canvas
                printed += rezised; //actualizo lo que ya imprimi
                page++; // actualizo mi pagina
            }

            doc.save('test.pdf');

https://codepen.io/eduardojl-the-reactor/pen/gOMYVrY

Aun que yo creo que no es lo ideal, ya que te puede cortar la imagen en lugares donde no debería, lo recomendable seria que generes una imagen individual por cada componente que quieras insertar a tu pdf.

1
  • Muchas gracias Eduardo. El código genera el pdf de varias páginas perfectamente. Lo único, como ajusta el contenido a cada página hasta el borde, al imprimir corta parte del texto o el contenido como he añadido al post de la pregunta. ¿Cómo se puede hacer que no corte y se imprima todo el contenido? Añadir algo de margen supongo. Muchas gracias Eduardo.
    – ret
    Commented el 7 oct. 2020 a las 14:05

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.