I can't add another image in JSPDF?!

brahimkraiem commented 6 years ago

logoExp: string = '../../../../../assets/img/exp.png'; var img2 = new Image();

img2.addEventListener('load', function() { doc.setPage(1); doc.addImage(img2, 'png', 52, 82, 86, 86); }); img2.src = this.logoExp;

Uzlopak commented 6 years ago

If you write that you cant another(!) image, it seems that you have already added an image. So your code is not complete?

secondly... why setPage(1)? did you mean addPage?

brahimkraiem commented 6 years ago

setPage(1) to add image in the first page . THe first picture is displayed but the second no. This is my all code: logoExp: string = '../../../../../assets/img/exp.png'; logo: string = '../../../../../assets/img/logo.png';

public pdfHtmlCV() { debugger console.log("test log",this.currentProject.trainer._id) this.userService.getProfile(this.currentProject.trainer._id).then(res => {

  let result: any = res;
  this.profilTrainer = result;
  console.log("Profil has been loaded",this.profilTrainer);
  var doc = new jsPDF('p', 'pt');
  //green block
  let pageHeight= doc.internal.pageSize.height;
  doc.setDrawColor(28, 188, 176);
  doc.setFillColor(28, 188, 176);
  doc.rect(0, 0, 190, pageHeight, 'FD');
  doc.setLineWidth(2);
  doc.setDrawColor(255, 255, 255);
  doc.roundedRect(50, 80, 90, 90, 3, 3, 'FD'); // Black
  var img2 = new Image();

  img2.addEventListener('load', function() {
    doc.addImage(img2, 'png', 52, 82, 86, 86);
  });
  img2.src = this.currentProject.trainer.profile.profileImage;
  if ((this.currentProject.trainer.profile.firstname) && (this.currentProject.trainer.profile.lastname) ==null ) {
    doc.text(30, 200, '');
  }else{
    doc.setFontSize(13);
    doc.setFontStyle('bold');
    doc.setTextColor(255, 255, 255);
    doc.text(50, 200, this.currentProject.trainer.profile.firstname + " " + this.currentProject.trainer.profile.lastname);

  }
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  doc.setTextColor(255, 255, 255);
  var strArr = doc.splitTextToSize(this.profilTrainer.resume, 160)
  doc.text(strArr, 20, 217);
  doc.setFontSize(10);
  doc.setFontStyle('bold');
  doc.setTextColor(255, 255, 255);
  doc.text(40, 350, this.profilTrainer.email);
  doc.text(40, 370, this.profilTrainer.phone);

  //white block
  doc.setLineWidth(0.2);
  doc.setFontSize(15);
  doc.setFontStyle('bold');
  doc.setTextColor(212, 212, 212);
  doc.text(450, 60, 'Curriculum Vitae');
  doc.setDrawColor(28, 188, 176);
  doc.setFillColor(28, 188, 176);
  doc.circle(217, 95, 5, 'FD'); //filled red circle with black border
  var img3 = new Image();

  img3.addEventListener('load', function() {
    doc.addImage(img3, 'png', 52, 82, 86, 86);
  });
  img3.src = this.logoExp;

  doc.setTextColor(66, 66, 66);
  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.text(230, 100, 'Experience:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(310, 98, 540, 98); // horizontal line
  doc.setTextColor(77, 75, 76);
  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(145, 145, 145);
  let finalY =120;
    for (var i = 0; i < this.profilTrainer.experiences.length; i++) {
      doc.text(230, finalY, this.profilTrainer.experiences[i].date);
      finalY +=20;
  }
    doc.setFontSize(9);
    doc.setFontStyle('bold');
    doc.setTextColor(65, 65, 65);
  let finalY12 =120;
    for (var i = 0; i < this.profilTrainer.experiences.length; i++) {
      doc.text(340, finalY12, this.profilTrainer.experiences[i].poste.toString());
      finalY12 +=20;
    }
  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(28, 188, 176);
  let finalY13 =120;
  for (var i = 0; i < this.profilTrainer.experiences.length; i++) {
    doc.text(460, finalY13,"à "+ this.profilTrainer.experiences[i].place.toString());
    finalY13 +=20;
  }

  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.setTextColor(66, 66, 66);
  doc.text(230, 210, 'Experience en tant que Formateur:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(440, 208, 540, 208); // horizontal line

  doc.setTextColor(77, 75, 76);

  doc.setFontSize(8);
  doc.setFontStyle('bold');
  doc.setTextColor(145, 145, 145);
  let finalY2 =230;
  for (var i = 0; i < this.profilTrainer.experiencesAsFormater.length; i++) {
    doc.text(230, finalY2, this.profilTrainer.experiencesAsFormater[i].date);
    finalY2 +=20;
  }
  doc.setFontSize(9);
  doc.setFontStyle('bold');
  doc.setTextColor(65, 65, 65);
  let finalY21 =230;
  for (var i = 0; i < this.profilTrainer.experiencesAsFormater.length; i++) {
    doc.text(340, finalY21, this.profilTrainer.experiencesAsFormater[i].poste.toString());
    finalY21 +=20;
  }

  let finalY22 =230;
  for (var i = 0; i < this.profilTrainer.experiencesAsFormater.length; i++) {
    doc.setFontSize(8);
    doc.setFontStyle('normal');
    doc.setTextColor(28, 188, 176);
    doc.text(450, finalY22,"à ");

    doc.setFontSize(8);
    doc.setFontStyle('normal');
    doc.setTextColor(145, 145, 145);
    doc.text(460, finalY22,this.profilTrainer.experiencesAsFormater[i].place.toString());
    finalY22 +=20;
  }
  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.setTextColor(66, 66, 66);
  doc.text(230, 320, 'Certificats:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(310, 318, 540, 318); // horizontal line

  doc.setTextColor(77, 75, 76);

  doc.setFontSize(8);
  doc.setFontStyle('bold');
  doc.setTextColor(145, 145, 145);
  let finalY3 =340;
  for (var i = 0; i < this.profilTrainer.certif.length; i++) {
    doc.text(230, finalY3, this.profilTrainer.certif[i].date);
    finalY3 +=20;
  }
  doc.setFontSize(9);
  doc.setFontStyle('bold');
  doc.setTextColor(65, 65, 65);
  let finalY31 =340;
  for (var i = 0; i < this.profilTrainer.certif.length; i++) {
    doc.text(340, finalY31, this.profilTrainer.certif[i].certif.toString());
    finalY31 +=20;
  }
  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.setTextColor(66, 66, 66);
  doc.text(230, 420, 'Formation de base:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(350, 418, 540, 418); // horizontal line

  doc.setTextColor(77, 75, 76);

  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(65, 65, 65);

  let finalY4 =445;

  for (var i = 0; i < this.profilTrainer.basicFormation.length; i++) {
    doc.text(230, finalY4, this.profilTrainer.basicFormation[i].ecole);
    finalY4 +=50;
  }
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  doc.setTextColor(145, 145, 145);
  let finalY41 =455;
  for (var i = 0; i < this.profilTrainer.basicFormation.length; i++) {
    doc.text(230, finalY41, this.profilTrainer.basicFormation[i].diplome.toString());
    finalY41 +=50;
  }
  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(65, 65, 65);
  let finalY42 =465;
  for (var i = 0; i < this.profilTrainer.basicFormation.length; i++) {
    doc.text(230, finalY42, this.profilTrainer.basicFormation[i].date.toString());
    finalY42 +=50;
  }

  var img = new Image;
  img.onload = function() {
    doc.addImage(this, 200, 20, 150, 60);
    doc.save('CV.pdf');
  };
  img.crossOrigin = ""; // for demo as we are at different origin than image
  img.src = this.logo; // some random imgur image
  // Save the PDF

}, err => {
  console.log("Error get Profil: " + err);
  this.profilTrainer = '';
});

}

Uzlopak commented 6 years ago

I dont think that this can work anyway. You know that you have 3 images, so write

var imagesToBeLoaded = 3

and you need a callback-function to figure out which is called when all images are loaded and added to the pdf

So every time an image is loaded and added you call the callback which decrements imagesToBeLoaded. And if imagesToBeLoaded === 0 you run your last code.

public pdfHtmlCV() {
debugger
console.log("test log",this.currentProject.trainer._id)
this.userService.getProfile(this.currentProject.trainer._id).then(res => {
  let result: any = res;
  this.profilTrainer = result;
  console.log("Profil has been loaded",this.profilTrainer);
  var doc = new jsPDF('p', 'pt');

  var imagesToBeLoaded = 3;
  var callback = function () {
     imagesToBeLoaded -= 1;
     if (imagesToBeLoaded === 0) {
         doc.save('CV.pdf');
     }
  }
  //green block
  let pageHeight= doc.internal.pageSize.height;
  doc.setDrawColor(28, 188, 176);
  doc.setFillColor(28, 188, 176);
  doc.rect(0, 0, 190, pageHeight, 'FD');
  doc.setLineWidth(2);
  doc.setDrawColor(255, 255, 255);
  doc.roundedRect(50, 80, 90, 90, 3, 3, 'FD'); // Black
  var img2 = new Image();

  img2.addEventListener('load', function() {
    doc.addImage(img2, 'png', 52, 82, 86, 86);
    callback();
  });
  img2.src = this.currentProject.trainer.profile.profileImage;
  if ((this.currentProject.trainer.profile.firstname) && (this.currentProject.trainer.profile.lastname) ==null ) {
    doc.text(30, 200, '');
  }else{
    doc.setFontSize(13);
    doc.setFontStyle('bold');
    doc.setTextColor(255, 255, 255);
    doc.text(50, 200, this.currentProject.trainer.profile.firstname + " " + this.currentProject.trainer.profile.lastname);

  }
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  doc.setTextColor(255, 255, 255);
  var strArr = doc.splitTextToSize(this.profilTrainer.resume, 160)
  doc.text(strArr, 20, 217);
  doc.setFontSize(10);
  doc.setFontStyle('bold');
  doc.setTextColor(255, 255, 255);
  doc.text(40, 350, this.profilTrainer.email);
  doc.text(40, 370, this.profilTrainer.phone);

  //white block
  doc.setLineWidth(0.2);
  doc.setFontSize(15);
  doc.setFontStyle('bold');
  doc.setTextColor(212, 212, 212);
  doc.text(450, 60, 'Curriculum Vitae');
  doc.setDrawColor(28, 188, 176);
  doc.setFillColor(28, 188, 176);
  doc.circle(217, 95, 5, 'FD'); //filled red circle with black border
  var img3 = new Image();

  img3.addEventListener('load', function() {
    doc.addImage(img3, 'png', 52, 82, 86, 86);
    callback();
  });
  img3.src = this.logoExp;

  doc.setTextColor(66, 66, 66);
  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.text(230, 100, 'Experience:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(310, 98, 540, 98); // horizontal line
  doc.setTextColor(77, 75, 76);
  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(145, 145, 145);
  let finalY =120;
    for (var i = 0; i < this.profilTrainer.experiences.length; i++) {
      doc.text(230, finalY, this.profilTrainer.experiences[i].date);
      finalY +=20;
  }
    doc.setFontSize(9);
    doc.setFontStyle('bold');
    doc.setTextColor(65, 65, 65);
  let finalY12 =120;
    for (var i = 0; i < this.profilTrainer.experiences.length; i++) {
      doc.text(340, finalY12, this.profilTrainer.experiences[i].poste.toString());
      finalY12 +=20;
    }
  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(28, 188, 176);
  let finalY13 =120;
  for (var i = 0; i < this.profilTrainer.experiences.length; i++) {
    doc.text(460, finalY13,"à "+ this.profilTrainer.experiences[i].place.toString());
    finalY13 +=20;
  }

  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.setTextColor(66, 66, 66);
  doc.text(230, 210, 'Experience en tant que Formateur:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(440, 208, 540, 208); // horizontal line

  doc.setTextColor(77, 75, 76);

  doc.setFontSize(8);
  doc.setFontStyle('bold');
  doc.setTextColor(145, 145, 145);
  let finalY2 =230;
  for (var i = 0; i < this.profilTrainer.experiencesAsFormater.length; i++) {
    doc.text(230, finalY2, this.profilTrainer.experiencesAsFormater[i].date);
    finalY2 +=20;
  }
  doc.setFontSize(9);
  doc.setFontStyle('bold');
  doc.setTextColor(65, 65, 65);
  let finalY21 =230;
  for (var i = 0; i < this.profilTrainer.experiencesAsFormater.length; i++) {
    doc.text(340, finalY21, this.profilTrainer.experiencesAsFormater[i].poste.toString());
    finalY21 +=20;
  }

  let finalY22 =230;
  for (var i = 0; i < this.profilTrainer.experiencesAsFormater.length; i++) {
    doc.setFontSize(8);
    doc.setFontStyle('normal');
    doc.setTextColor(28, 188, 176);
    doc.text(450, finalY22,"à ");

    doc.setFontSize(8);
    doc.setFontStyle('normal');
    doc.setTextColor(145, 145, 145);
    doc.text(460, finalY22,this.profilTrainer.experiencesAsFormater[i].place.toString());
    finalY22 +=20;
  }
  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.setTextColor(66, 66, 66);
  doc.text(230, 320, 'Certificats:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(310, 318, 540, 318); // horizontal line

  doc.setTextColor(77, 75, 76);

  doc.setFontSize(8);
  doc.setFontStyle('bold');
  doc.setTextColor(145, 145, 145);
  let finalY3 =340;
  for (var i = 0; i < this.profilTrainer.certif.length; i++) {
    doc.text(230, finalY3, this.profilTrainer.certif[i].date);
    finalY3 +=20;
  }
  doc.setFontSize(9);
  doc.setFontStyle('bold');
  doc.setTextColor(65, 65, 65);
  let finalY31 =340;
  for (var i = 0; i < this.profilTrainer.certif.length; i++) {
    doc.text(340, finalY31, this.profilTrainer.certif[i].certif.toString());
    finalY31 +=20;
  }
  doc.setFontSize(12);
  doc.setFontStyle('bold');
  doc.setTextColor(66, 66, 66);
  doc.text(230, 420, 'Formation de base:');
  doc.setFontStyle('normal');
  doc.setDrawColor(28, 188, 176); // draw red lines
  doc.line(350, 418, 540, 418); // horizontal line

  doc.setTextColor(77, 75, 76);

  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(65, 65, 65);

  let finalY4 =445;

  for (var i = 0; i < this.profilTrainer.basicFormation.length; i++) {
    doc.text(230, finalY4, this.profilTrainer.basicFormation[i].ecole);
    finalY4 +=50;
  }
  doc.setFontSize(9);
  doc.setFontStyle('normal');
  doc.setTextColor(145, 145, 145);
  let finalY41 =455;
  for (var i = 0; i < this.profilTrainer.basicFormation.length; i++) {
    doc.text(230, finalY41, this.profilTrainer.basicFormation[i].diplome.toString());
    finalY41 +=50;
  }
  doc.setFontSize(8);
  doc.setFontStyle('normal');
  doc.setTextColor(65, 65, 65);
  let finalY42 =465;
  for (var i = 0; i < this.profilTrainer.basicFormation.length; i++) {
    doc.text(230, finalY42, this.profilTrainer.basicFormation[i].date.toString());
    finalY42 +=50;
  }

  var img = new Image;
  img.onload = function() {
    doc.addImage(this, 200, 20, 150, 60);
    callback();
  };
  img.crossOrigin = ""; // for demo as we are at different origin than image
  img.src = this.logo; // some random imgur image
  // Save the PDF

}, err => {
  console.log("Error get Profil: " + err);
  this.profilTrainer = '';
});

Not tested and not giving support for this.

brahimkraiem commented 6 years ago

Thank you it work. Have you find a solution for append text to the previous text in JSPDF?

brahimkraiem commented 6 years ago

Can i add images without a specific number of images to be load??

Uzlopak commented 6 years ago

Your question makes no sense.

parallax / jsPDF

I can't add another image in JSPDF?! #1635