Add Dynamic Image In PDF And Download PDF In Angular 7

Introduction

Here, we will learn about how we can add a dynamic image in pdf and download that file(pdf) in Angular 7. There are lots of pdf libraries available for Angular 7. We will going to use jsPDF and will upload an image from UI rather than a static path to make dynamic.

Prerequisite:

• Basic knowledge of Angular 7
• Visual Studio Code
• Angular CLI must be installed
• Node JS must be installed

Let’s get started

Open the Visual Studio code and open a new Terminal.

Type the following command in it.

ng new Angular7-AddImageInPDF

Go to the Root folder, Yes for Angular routing and use CSS for the stylesheet.

We will also install the jsPDF as we are going to use this library.

cd .\Angular7-AddImageInPDF\
npm install jspdf

Open the project in Visual Studio Code by opening the folder by command.

code .

Open “app.component.html” file to and paste below HTML code.

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

Now open the “app.component.ts” file to write our main logic which adds an image in pdf and download that pdf file.

1. Import below namespaces as we are going to use in code.

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

2. Add DomSanitizer in the constructor.

constructor(private sanitizer: DomSanitizer) { }

3. Add below two functions to handle 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 full code of “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);
  }

}

That’s it, fire following command to see the charm!

ng serve

open your browser on http://localhost:4200/ or click on “http://localhost:4200/” it.

Output:

Please give your valuable feedback/comments/questions about this article below. 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