0

I would generate a pdf with a dynamic content.

The text content could change so their positions also

Actually I'm fixing statically text position, but when the text content change their width is not the same and this is consing overlapping content.

const pdf = new jsPDF('l', 'px', 'a4');
pdf.internal.scaleFactor = 0.75;
const elm = this.logoActivity.nativeElement.src;
pdf.addImage(elm, 'png', 20, 20, 50, 16);
pdf.setFontType("bold");
pdf.setTextColor(255, 182, 18);
pdf.text(150, -280, "dynamic txt");
pdf.setTextColor(0, 0, 0);
pdf.text(30, -250, _.startCase(this.dateOfTheDay));
console.log(this.filterService.filters$.value);
pdf.text(100, -250, this.activityService.activity);
pdf.save(`finename.pdf`);

I would like to know how can I place element as in HTML page ( next element is placed after).

Should I create an HTML template then use html2canvas to render it ? The problem with html2canvas is that it generates an image/canvas so the text quality is not as good as jspdf add-elements methods.

is there other solutions ?

screen shot of issue

Hamza Haddad
  • 1,516
  • 6
  • 28
  • 48
  • You can combine the texts into a single string first in this case, I guess. –  Apr 23 '19 at 16:17
  • But I should handle text size – Hamza Haddad Apr 24 '19 at 08:34
  • Your question is essentially a duplicate of this: https://stackoverflow.com/questions/19109591/how-to-calculate-width-and-height-of-text-in-jspdf Just calculate the width of the first text, add space and its X coordinate and you get the X coordinate for the 2nd text. –  Apr 24 '19 at 10:27
  • I'm using pixels in my documents, in the question you mention it calculates width in pt – Hamza Haddad Apr 24 '19 at 10:35
  • You should be able to multiply that by an appropriate factor. Just do a few tests. You have all the tools you need to solve this on your own. –  Apr 24 '19 at 10:44

0 Answers0