Introduction

There are lots of pdf libraries available for Angular 7. We will use jsPDF in this article and will upload an image from the UI rather than a static path, in order to make it dynamic.
Prerequisites
Let’s get started.
Open Visual Studio Code and open a new terminal.
Add Dynamic Image In PDF And Download PDF In Angular 7
Type the following command in it.
  1. ng new Angular7-AddImageInPDF
Go to the Root folder, select "Yes" for Angular routing, and use CSS for the stylesheet.
Add Dynamic Image In PDF And Download PDF In Angular 7
We will also install the jsPDF as we are going to use this library.
Add Dynamic Image In PDF And Download PDF In Angular 7
  1. cd .\Angular7-AddImageInPDF\ npm install jspdf
Open the project in Visual Studio Code by opening the folder by command.
  1. code .
Add Dynamic Image In PDF And Download PDF In Angular 7
Open the "app.component.html" file to and paste the below HTML code.
Add Dynamic Image In PDF And Download PDF In Angular 7
  1. <input type="file" name="image" (change)="onFileChanged($event)">
  2. <div class="info" *ngIf="filePreview">
  3. <img [src]="sanitize(filePreview)" width="150" height="150"/>
  4. </div>
Now, open the "app.component.ts" file to write our main logic which adds an image in pdf and download that pdf file.
Import the below namespaces as we are going to use in code.
  1. import * as jsPDF from 'jspdf';
  2. import { DomSanitizer } from '@angular/platform-browser';
Add Dynamic Image In PDF And Download PDF In Angular 7
Add DomSanitizer in the constructor.
  1. constructor(private sanitizer: DomSanitizer) { }
Add the below two functions to handle file upload in pdf and download functionalities.
  1. onFileChanged(event: { target: { files: any[]; }; }) {
  3. let reader = new FileReader();
  4. if (event.target.files && event.target.files.length > 0) {
  5. let file = event.target.files[0];
  6. reader.readAsDataURL(file);
  7. reader.onload = () => {
  8. this.fileName = file.name + " " + file.type;
  9. const doc = new jsPDF();
  10. const base64ImgString = (reader.result as string).split(',')[1];
  11. doc.addImage(base64ImgString, 15, 40, 50, 50);
  12. this.filePreview = 'data:image/png' + ';base64,' + base64ImgString;
  13. doc.save('TestPDF')
  14. };
  15. }
  16. }
  18. sanitize(url: string) {
  19. return this.sanitizer.bypassSecurityTrustUrl(url);
  20. }
Add Dynamic Image In PDF And Download PDF In Angular 7
The full code of "app.component.ts" file is given below.
  1. import { Component } from '@angular/core';
  2. import * as jsPDF from 'jspdf';
  3. import { DomSanitizer } from '@angular/platform-browser';
  5. @Component({
  6. selector: 'app-root',
  7. templateUrl: './app.component.html',
  8. styleUrls: ['./app.component.css']
  9. })
  10. export class AppComponent {
  11. title = 'Angular7-AddImageInPDF';
  12. fileName: string;
  13. filePreview: string
  15. constructor(private sanitizer: DomSanitizer) { }
  17. onFileChanged(event: { target: { files: any[]; }; }) {
  19. let reader = new FileReader();
  20. if (event.target.files && event.target.files.length > 0) {
  21. let file = event.target.files[0];
  22. reader.readAsDataURL(file);
  23. reader.onload = () => {
  24. this.fileName = file.name + " " + file.type;
  25. const doc = new jsPDF();
  26. const base64ImgString = (reader.result as string).split(',')[1];
  27. doc.addImage(base64ImgString, 15, 40, 50, 50);
  28. this.filePreview = 'data:image/png' + ';base64,' + base64ImgString;
  29. doc.save('TestPDF')
  30. };
  31. }
  32. }
  34. sanitize(url: string) {
  35. return this.sanitizer.bypassSecurityTrustUrl(url);
  36. }
  38. }
That’s it. Fire the following command to see the charm!
  1. ng serve
Open your browser on http://localhost:4200/ or click on “http://localhost:4200/”.
Output
Add Dynamic Image In PDF And Download PDF In Angular 7
Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.
You can download the source code from here.