Add Dynamic Image In PDF And Download In Angular

The Code Points September 03, 2022 0

In this article, we will learn how to add a dynamic image to the PDF document and export it in the angular application. For Angular, there are multiple pdf libraries available. In this article, to make the PDF document dynamic, we will use jsPDF and upload an image via the user interface as opposed to a static location.

So, let's start with the implementation

First, we need to create a new angular application using the following command.

ng new AddImageInPDF

Now, we need to install the jspdf npm package using the following command.

npm install jspdf

Now, add the following code under the app.component.html file.

<input type="file" name="image" (change)="onFileChanged($event)">
<div class="info" *ngIf="filePreview">
    <img [src]="sanitize(filePreview)" width="150" height="150"/>
</div>

Now, using the following import the jsPDF and DomSanitizer namespaces into the app.component.ts file.

import * as jsPDF from 'jspdf';
import { DomSanitizer } from '@angular/platform-browser';

Now, add DomSanitizer to the constructor.

constructor(private sanitizer: DomSanitizer) { }

Now, Using the following code add functions to manage the file upload in pdf and download functionalities.

onFileChanged(event: { target: { files: any[]; }; }) {

    let reader = new FileReader();
    if (event.target.files && event.target.files.length > 0) {
      let file = event.target.files[0];
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.fileName = file.name + " " + file.type;
        const doc = new jsPDF();
        const base64ImgString = (reader.result as string).split(',')[1];
        doc.addImage(base64ImgString, 15, 40, 50, 50);
        this.filePreview = 'data:image/png' + ';base64,' + base64ImgString;
        doc.save('TestPDF')
      };
    }
  }

  sanitize(url: string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }

The following code is the complete code of the app.component.ts file.

import { Component } from '@angular/core';
import * as jsPDF from 'jspdf';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular7-AddImageInPDF';
  fileName: string;
  filePreview: string

  constructor(private sanitizer: DomSanitizer) { }

  onFileChanged(event: { target: { files: any[]; }; }) {

    let reader = new FileReader();
    if (event.target.files && event.target.files.length > 0) {
      let file = event.target.files[0];
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.fileName = file.name + " " + file.type;
        const doc = new jsPDF();
        const base64ImgString = (reader.result as string).split(',')[1];
        doc.addImage(base64ImgString, 15, 40, 50, 50);
        this.filePreview = 'data:image/png' + ';base64,' + base64ImgString;
        doc.save('TestPDF')
      };
    }
  }

  sanitize(url: string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }

}

Now, run the application using the ng serve command into the terminal and see the browser screen. now we can upload images and export them to pdf documents.

Conclusion

In this article, we learned how to add a dynamic image to the PDF document and export it in the angular application using the jsPDF.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section.

If you have any doubt or confusion then free to ask in the comment section.