Estoy usando una plantilla HTML, CSS, js y la estoy convirtiendo a pdf con la aplicación de Android. Tuve un problema al detectar cuándo se romperá la página siguiente para poder colocar un elemento en la página siguiente y cambiar su diseño. Estoy tratando de calcular la distancia desde la parte superior de la página hasta la parte inferior de ese elemento, y luego verifico si ese elemento termina después de que finaliza la página.

 <script> const pageHeight = 275; //page height without margins in mm const pixelSize = 0.2645833333; //pixel size in mm const normalGraph = document.getElementById("normal-graph-block"); const breakGraph = document.getElementById("break-graph-block"); const pixelRatio = window.devicePixelRatio; function myFunction() { //Get distance from top of page to top of element plus element height //multiplyed by pixel size to get distance in mm const graphBottomPos = (normalGraph.getBoundingClientRect().top + normalGraph.offsetHeight) * pixelSize; if ( graphBottomPos > pageHeight ) { normalGraph.style.display = "none"; breakGraph.style.display = "block"; } } window.onload = myFunction; </script>

No funciona bien y obtengo diferentes valores en diferentes teléfonos. Creo que necesito usar devicePixelRatio para compensar eso, pero podría hacerlo funcionar, incluso con él.

Por favor, no me digan que use page-break-before, after.. , porque necesito ocultar ese elemento después de un salto de página y mostrar uno similar con un estilo diferente.

Sería mucho mejor si pudiera detectar ese salto de página de alguna manera, pero como no es un elemento <br> , creo que no es posible.