Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

454
Vistas
Cómo agregar perfectamente mi imagen en un archivo pdf usando jsPDF sin que la imagen se distorsione

Paso un día y medio tratando de resolver esto. Estoy tratando de obtener una captura de pantalla de toda mi página web y agregarla a un archivo pdf usando jspdf. ¿Cómo puedo alinearlo de manera que se vea de manera similar a como lo hacemos cuando usamos la opción de impresión predeterminada en el navegador? Limpio y ordenado. Sin embargo, en jspdf no entiendo cómo extender mis datos a la página siguiente en pdf también. Esto es lo que he probado:

 function setScreenshot() { html2canvas(document.body).then( function (canvas) { var extra_canvas = document.createElement("canvas"); let height = $('body').height(); let width = $('body').width(); extra_canvas.setAttribute('width', width); extra_canvas.setAttribute('height', height); var ctx = extra_canvas.getContext('2d'); ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height); var dataURL = extra_canvas.toDataURL(); var img = $(document.createElement('img')); doc = new jsPDF({ unit: 'px', }); let docWidth = doc.internal.pageSize.width let docHeight = doc.internal.pageSize.height let widthRatio = docWidth / canvas.width let heightRatio = docHeight / canvas.height doc.addImage(dataURL, 'JPEG', 0, 0, width, height * heightRatio); doc.save('ExportFile.pdf'); $('#screenShot').attr('download', 'Test file.png'); $('#screenShot')[0].click(); }) }

También he intentado cambiar el tamaño del lienzo al de una hoja A4 como sigue:

 ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 793, 1122);

Pero nuevamente, no funciona para dispositivos más pequeños ya que la imagen se estira. Cualquier solución a esto será realmente útil. Gracias chicos. También sugiera si hay un método alternativo o una biblioteca con la que pueda lograr lo mismo.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda