0

Estoy obteniendo un pdf a partir de un .html mediante html2pdf. El problema es, que cuando cambio de tamaño la ventana del navegador, o cuando se aumenta el zoom, el pdf sale descuadrado. Tengo entendido que esto puede ser por la escala y por el ancho. Actualmente estoy utilizando este código.

function printReport() {
    //const html2pdf = require("./html2pdf");
    const element = document.getElementById("report");
    var positionInfo = element.getBoundingClientRect();
    var height = positionInfo.height;
    var width = positionInfo.width;
    html2pdf().set({
        margin: [0, 0, 0, 0],
        pagebreak: { mode: ['css'] },
        jsPDF: { unit: 'in', format: 'a3', orientation: 'portrait' },
        html2canvas: { scale: 2, },
        
    })
        .from(element).save("report.pdf");


}

Donde trato de obtener el Width y el Height del div donde está lo que quiero imprimir, el problema es que la función getBoundingClientRect() me devuelve 0 en todo, he probado otras formas como document.getElementById("report").width y lo mismo. Sin embargo, es evidente que el div con esa id se está encontrando puesto que, analizando la variable element con el inspector de elementos, se puede ver como tiene cosas dentro.

De todas formas, tampoco sé exactamente si voy bien encaminado por aquí para solucionar el problema, aunque observando la lista de parámetros de html2pdf, no he dado, en principio, con ninguno que me sirva para adaptar el pdf según los tamaños de ventana.

1
  • si element tiene display none no posee dimensiones, un element.style.display = ''; ( o unset o initial) dentro de un bloque sincrono ("mostrarlo medirlo y volver a ocultarlo antes de retornar") puede evitar el flasheo y te da las medidas Commented el 24 ago. 2023 a las 18:39

2 respuestas 2

1

Hay varias cosas por mejorar y corregir:

El tamaño hay que convertirlo de pixel a pulgadas:

var positionInfo = element.getBoundingClientRect();
    
var height = positionInfo.height / 96;
var width = positionInfo.width / 96;

También sería conveniente eliminar la escala del html2canvas El método quedaría así:

function printReport() {
    const element = document.getElementById("report");
    var positionInfo = element.getBoundingClientRect();
    
    var height = positionInfo.height / 96;
    var width = positionInfo.width / 96;
    
    html2pdf().set({
        margin: [0, 0, 0, 0],
        pagebreak: { mode: ['css'] },
        jsPDF: { unit: 'in', format: 'a3', orientation: 'portrait' },
    }).from(element).save("report.pdf");
}

Pueden existir otras cosas en tu HTML que estén alterando el renderizado, es importante estudiar la librería y el estándar de partida: Link

4
  • Gracias por tu respuesta. He tenido lo que dices en cuenta, pero el principal problema sigue siendo que el la funcion getBoundingClientRect() devuelve 0 en la altura y el ancho.
    – xXNukem KS
    Commented el 15 ago. 2023 a las 18:21
  • 1
    @xXNukemKS tira un console.log(element) y fijate que sale... si el momento en que se ejecuta no esta renderizado el html es posible que por hay vaya el asunto ... Commented el 15 ago. 2023 a las 19:17
  • "element" tiene cosas dentro en ese momento, de hecho la propiedad "innerHTML" saca todo correctamente, sin embargo no logro dar en como sacar el ancho y el alto para establecerlo correctamente en el PDF.
    – xXNukem KS
    Commented el 21 ago. 2023 a las 7:48
  • 1
    @xXNukemKS por eso te estoy diciendo que evalues el contenido de element, debe tener en algun lugar esos datos, si no esta es por que no se esta renderizando de forma sincrona y tendrias que buscar algun paleativo asyncrono Commented el 21 ago. 2023 a las 14:22
0

A mi me parece que el problema es la tamaño de papel que estas usando. Por lo general se utilizan los tamaños Letter, Legal o A4, pero tu estas usando un A3. Te dejo un link done vienen los tamaños de papel.

Otro problema que veo es que, al parecer calculas los tamaños de las cosas que quieres poner en el PDF con respecto al tamaño de la resolución de la pantalla. Eso no esta bien, los tamaños de las cosas deben ser con respecto al tamaño de la hoja y no con respecto a la resolución de la pantalla. Esa es la razón de que cuando cambias la resolución se descuadre todo. Basicamente lo que te acabo de decir sería algo así:

var doc = new jsPDF("p", "mm", "a4");

var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();

Como vez el tamaño es con respecto a la hoja y no con respecto a la resolución de la pantalla. Eso es lo que hace internamente html2pdf.js pero para hacerlo externamente puede ser algo así:

html2pdf()
    .set({
        filename:petName+'_Kennel_Card_'+sizeSelected+'.pdf',
        margin:1
        jsPDF: {format:[canvasSizeObj.width,canvasSizeObj.height]}
     })
    .from(popupDOMContent)
    .save();

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.