0

Genera el archivo PDF sin problema, pero lo crea de manera ligeramente desproporcionada (verticalmente ligeramente aplastado). ¿Cómo se puede corregir para que sea de proporción exacta o más fiel? Gracias de antemano.

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>
2
  • Creo que el problema viene de que por un lado tienes un tamaño para el documento (A4), que tiene una proporción dada, y por otro lado tienes una imagen que tiene otras proporciones. Intenta que (width/height === imageWidth/imageHeight) el 1 oct. 2020 a las 7:44
  • Disculpa, ¿de qué manera se coloca ese código? Gracias.
    – ret
    el 1 oct. 2020 a las 7:48

1 respuesta 1

0

Creo que el problema es que quieres meter en un documento A4 (210 x 297 mm) una imagen que tiene un tamaño o proporción distintas. Para solucionarlo creo que bastaría con que usaras el tamaño de la imagen y no el del PDF al añadirla:

Creas un elemento img:

let image = new Image();
image.src = canvas.toDataURL("image/png");

Compruebas el tamaño de la imagen resultante y usas ese tamaño:

const iWidth = image.naturalWidth;
const iHeight = image.naturalHeight;
doc.addImage(pdf, 'JPEG', 0, 0, iWidth, iHeights);
doc.save('test.pdf');

Si la imagen la quieres ajustar al tamaño del documento, has de reducir/aumentar la altura y el ancho en la misma proporción.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.