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

119
Vistas
jsPDF insert html from specified id into a specific pdf page

I am creating a pdf using jsPDF in angular.

The HTML

<div id="myid">HTML GOES HERE</div>

create PDF js:

genPDF(){ 
    html2canvas(document.getElementById('myid'), {
       allowTaint: true,
       useCORS: false,
       scale: 1,
    }).then((canvas) => {

    var img = canvas.toDataURL("image/png");

    var imgWidth = 210; 
    var pageHeight = 297;  
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;
    var position = 10;
    var doc = new jsPDF()

    doc.setFontSize(16);
    doc.addImage(img, 'PNG', 0, position, imgWidth, imgHeight);

    doc.setProperties({
      title: 'Test pdf'
    });

    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
      position += heightLeft - imgHeight;

      doc.setFontSize(22);
      doc.text(20, 20, 'This is a title');

      doc.addPage();
      doc.addImage(img, 'PNG', 10, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
    }

    doc.save( 'mypdf.pdf');
 
   });
}

Is it possible to call different element to go into a particular page when required?

For example I want to create a cover page for page 1 and I'd like to have it in another element.

So is it possible to have something for page 1 like:

<div id="mycoverpageId">My Cover page html here</div>

How can I do this?

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