0

Estoy creando un sistema el cual estoy migrando una serie de cuestionarios que el usuario debe responder y a su vez guardarlo como pdf sus resultados tal cual estaban en papel... Mi problema aquí es que estoy utilizando captura de pantalla del div especifico para crear mi pdf pero tengo un problema de acuerdo como este visualizado en pantalla mi pagina es como me la imprime y no quiero esto... las api que utilizo son html2canvas y domtoimage para generar la captura pero en ambas me genera el mismo error y quiero optimizar mi tiempos de desarrollo alguien conoce una mejor forma de realizar esto...

mi codigo de html2canvas es:

generatePDF() {
    var data = document.getElementById('pdf');
    html2canvas(data).then(canvas => {
      var imgWidth = 20;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jsPDF('p', 'cm', 'letter');
      //var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 1, 1, imgWidth, imgHeight)
      pdf.save('newPDF.pdf');
    });
  }

y el con domtoimagen lo utilizo de la siguiente manera

pdf() {
var canvas = document.getElementById('pdf');

domtoimage.toJpeg(canvas, { quality: 1, bgcolor: 'white'}).then((dataUrl) => {
  let imagen = new Image();
  imagen.src = dataUrl;/*obtengo el screenshot*/
  let pdf = new jsPDF('P', 'cm', 'letter');/* creamos el pdf con jspdf, l es de landscape, mm: medidas en milímetros, y A4 el formato*/
  //pdf.texto ( 10 , 10 , "¡Cuestionario Audiometria!" );
  pdf.addImage(imagen, 1, 2, 19, 24); /*imagen: es la captura que insertaremos en el pdf, 18: margen izquierdo, 10: margen superior, 260:ancho, 189:alto, pueden jugar con estos valores, de esta forma me quedó prolijo en A4 horizontal*/
  pdf.save('documento.pdf'); /* descargamos el pdf con ese nombre.*/
}
);

}

2
  • Haz intentado usar npmjs.com/package/html-to-pdfmake es sencillo de implementar para html el 13 oct. 2020 a las 19:23
  • No había encontrado esta librería, se ve interesante deja la implemento para ver si resuelve mi problema. Estoy por implementar algo similar pero con NodeJS deja ver cual me resuelve mejor mi problema GRACIAS. el 14 oct. 2020 a las 13:51

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.