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.