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.
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