¿Cómo configurar la imagen para que se ajuste al ancho de la página usando jsPDF?

Hola, hallamos la solución a lo que necesitas, has scroll y la obtendrás más abajo.

Solución:

Puede obtener el ancho y la altura del documento PDF como se muestra a continuación,

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

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

Luego puede usar este ancho y alto para que su imagen se ajuste a todo el documento PDF.

var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJ......';

doc.addImage(imgData, 'JPEG', 0, 0, width, height);

Asegúrese de que su imagen tenga el mismo tamaño (resolución) del documento PDF. De lo contrario, se verá distorsionado (estirado).

Si quieres convertir px a mm use este enlace http://www.endmemo.com/sconvert/millimeterpixel.php

Si necesitas conseguir ancho 100% de archivo PDF y altura automática puede usar la propiedad ‘getImageProperties’ de html2canvas biblioteca

html2canvas(input)
      .then((canvas) => 
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF(
          orientation: 'landscape',
        );
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('download.pdf');
      );

Mi respuesta trata de un caso más específico de lo que está preguntando, pero creo que uno podría extraer algunas ideas de esto para aplicarlas de manera más general. Además, publicaría esto como un comentario a la respuesta de Purushoth (en la que se basa la mía), si pudiera.

Ok, entonces mi problema era cómo encajar una página web en el documento pdf, sin perder la relación de aspecto. Usé jsPDF junto con html2canvas y calculé la proporción de mi divancho y alto. Apliqué esa misma proporción al documento pdf y la página se ajustó perfectamente a la página sin ninguna distorsión.

var divHeight = $('#div_id').height();
var divWidth = $('#div_id').width();
var ratio = divHeight / divWidth;
html2canvas(document.getElementById("div_id"), 
     height: divHeight,
     width: divWidth,
     onrendered: function(canvas) 
          var image = canvas.toDataURL("image/jpeg");
          var doc = new jsPDF(); // using defaults: orientation=portrait, unit=mm, size=A4
          var width = doc.internal.pageSize.getWidth();    
          var height = doc.internal.pageSize.getHeight();
          height = ratio * width;
          doc.addImage(image, 'JPEG', 0, 0, width-20, height-10);
          doc.save('myPage.pdf'); //Download the rendered PDF.
     
);

Al final de todo puedes encontrar las interpretaciones de otros sys admins, tú incluso tienes la habilidad dejar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador