Angular Export to PDF Using PDFMake

<nav class="navbar navbar-expand navbar-light bg-primary d-flex justify-content-between">
  <div class="navbar-brand mb-0 h1 text-white">ONLINE RESUME BUILDER</div>
</nav>
<div class="container-fluid">
  <form #resumeForm="ngForm">
    <div class="row">
      <div class="col-md-8">
        <div class="shadow-sm card">
          <div class="card-body">
            <h4 class="card-title d-flex align-items-center">
              <i class="material-icons">
                account_circle
              </i>
              Personal Details</h4>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <input type="text" class="form-control" [(ngModel)]="resume.name" name="name" placeholder="Name"
                    #Name="ngModel" required
                    [ngClass]="{'is-invalid': Name.invalid && (Name.touched || resumeForm.submitted) }">
                </div>
                <div class="form-group">
                  <div class="form-group">
                    <textarea class="form-control" [(ngModel)]="resume.address" name="address" rows="3"
                      placeholder="Address" #Address="ngModel" required
                      [ngClass]="{'is-invalid': Address.invalid && (Address.touched || resumeForm.submitted) }"></textarea>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <input type="text" class="form-control" [(ngModel)]="resume.contactNo" name="contactNo"
                    placeholder="Contact No." #ContactNo="ngModel" required
                    [ngClass]="{'is-invalid': ContactNo.invalid && (ContactNo.touched || resumeForm.submitted) }">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" [(ngModel)]="resume.email" name="emailId"
                    placeholder="Email ID" #Email="ngModel" required
                    [ngClass]="{'is-invalid': Email.invalid && (Email.touched || resumeForm.submitted) }">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" [(ngModel)]="resume.socialProfile" name="socialProfile"
                    placeholder="Social Profile ">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Skills -->
        <div class="shadow-sm card">
          <div class="card-body">
            <div class="d-flex justify-content-between card-title">
              <h4 class="d-flex align-items-center">
                <i class="material-icons">
                  timeline
                </i>
                Skills</h4>
              <button class="btn btn-primary" (click)="addSkill()">+</button>
            </div>
            <div class="row">
              <div class="col-md-4" *ngFor="let s of resume.skills; let i=index">
                <div class="form-group">
                  <input type="text" class="form-control" name="skill{{i}}" [(ngModel)]="s.value"
                    placeholder="e.g. Java / Angular / .Net " #Skill="ngModel" required
                    [ngClass]="{'is-invalid': Skill.invalid && (Skill.touched || resumeForm.submitted) }">
                </div>
              </div>
            </div>
          </div>
        </div>


        <!-- Experience -->
        <div class="shadow-sm card">
          <div class="card-body">
            <div class="d-flex justify-content-between card-title">
              <h4 class="d-flex align-items-center">
                <i class="material-icons">
                  timeline
                </i>
                Experience</h4>
              <button class="btn btn-primary" (click)="addExperience()">+</button>
            </div>
            <div class="row" *ngFor="let ex of resume.experiences; let i=index">
              <div class="col-md-6">
                <div class="form-group">
                  <input type="text" class="form-control" name="employer{{i}}" [(ngModel)]="ex.employer"
                    placeholder="Employer" #Employer="ngModel" required
                    [ngClass]="{'is-invalid': Employer.invalid && (Employer.touched || resumeForm.submitted) }">
                </div>
                <div class="form-group">
                  <div class="form-group">
                    <textarea class="form-control" name="jobDescription{{i}}" [(ngModel)]="ex.jobDescription" rows="3"
                      placeholder="Job Description"></textarea>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <input type="text" class="form-control" name="jobTitle{{i}}" [(ngModel)]="ex.jobTitle"
                    placeholder="Job Title" #JobTitle="ngModel" required
                    [ngClass]="{'is-invalid': JobTitle.invalid && (JobTitle.touched || resumeForm.submitted) }">
                </div>
                <div class="form-group">
                  <input type="number" class="form-control" name="exInMonths{{i}}" [(ngModel)]="ex.experience"
                    placeholder="Experience in months" #Experience="ngModel" required
                    [ngClass]="{'is-invalid': Experience.invalid && (Experience.touched || resumeForm.submitted) }">
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- Education -->
        <div class="shadow-sm card">
          <div class="card-body">
            <div class="d-flex justify-content-between card-title">
              <h4 class="d-flex align-items-center">
                <i class="material-icons">
                  school
                </i>
                Education</h4>
              <button class="btn btn-primary" (click)="addEducation()">+</button>
            </div>
            <div class="row" *ngFor="let ed of resume.educations; let i=index">
              <div class="col-md-3">
                <div class="form-group">
                  <select class="form-control" placeholder="Degree" name="degree{{i}}" [(ngModel)]="ed.degree"
                    #Degree="ngModel" required
                    [ngClass]="{'is-invalid': Degree.invalid && (Degree.touched || resumeForm.submitted) }">
                    <option [value]="d" *ngFor="let d of degrees">{{d}}</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <input type="text" class="form-control" name="college{{i}}" [(ngModel)]="ed.college"
                    placeholder="School/College" #College="ngModel" required
                    [ngClass]="{'is-invalid': College.invalid && (College.touched || resumeForm.submitted) }">
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <input type="number" class="form-control" name="passingYear{{i}}" [(ngModel)]="ed.passingYear"
                    placeholder="Passing Year" #PassingYear="ngModel" required
                    [ngClass]="{'is-invalid': PassingYear.invalid && (PassingYear.touched || resumeForm.submitted) }">
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <input type="number" class="form-control" name="result{{i}}" [(ngModel)]="ed.percentage"
                    placeholder="Percentage" #Percentage="ngModel" required
                    [ngClass]="{'is-invalid': Percentage.invalid && (Percentage.touched || resumeForm.submitted) }">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Other Details -->

        <div class="shadow-sm card">
          <div class="card-body">
            <h4 class="card-title d-flex align-items-center">
              <i class="material-icons"> list </i>Other Details</h4>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <textarea type="text" class="form-control" [(ngModel)]="resume.otherDetails" name="otherDetails"
                    rows="4"></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="shadow-sm card action-buttons">
          <button (click)="resumeForm.valid ? generatePdf('open') : ''"
            class="btn btn-primary d-flex align-items-center justify-content-center">
            <i class="material-icons">
              picture_as_pdf
            </i> <span>Open PDF</span></button>
          <button (click)="resumeForm.valid ? generatePdf('download') : ''"
            class="btn btn-primary d-flex align-items-center justify-content-center">
            <i class="material-icons">
              cloud_download
            </i><span>Download PDF</span></button>
          <button (click)="resumeForm.valid ? generatePdf('print') : ''"
            class="btn btn-primary d-flex align-items-center justify-content-center">
            <i class="material-icons">
              print
            </i><span>Print PDF</span></button>

          <button type='reset' (click)="resetForm()"
            class="btn btn-primary d-flex align-items-center justify-content-center">
            <i class="material-icons">
              clear
            </i><span>Reset</span></button>
        </div>

        <div class="card p-4">
          <div class="form-group">
            <label class="h4 mb-3" for="">Show your picture in Resume</label>
            <input type="file" class="form-control-file" (change)="fileChanged($event)" aria-describedby="fileHelpId">
          </div>
          <img *ngIf="resume.profilePic" [src]="resume.profilePic" class="img-thumbnail">
        </div>
      </div>
    </div>
  </form>
</div>

import { Component } from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import { Resume, Experience, Education, Skill } from './resume';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  resume = new Resume();

  degrees = ['B.E.', 'M.E.', 'B.Com', 'M.Com'];

  constructor() {
    this.resume = JSON.parse(sessionStorage.getItem('resume')) || new Resume();
    if (!this.resume.experiences || this.resume.experiences.length === 0) {
      this.resume.experiences = [];
      this.resume.experiences.push(new Experience());
    }
    if (!this.resume.educations || this.resume.educations.length === 0) {
      this.resume.educations = [];
      this.resume.educations.push(new Education());
    }
    if (!this.resume.skills || this.resume.skills.length === 0) {
      this.resume.skills = [];
      this.resume.skills.push(new Skill());
    }
  }

  addExperience() {
    this.resume.experiences.push(new Experience());
  }

  addEducation() {
    this.resume.educations.push(new Education());
  }

  generatePdf(action = 'open') {
    const documentDefinition = this.getDocumentDefinition();

    switch (action) {
      case 'open': pdfMake.createPdf(documentDefinition).open(); break;
      case 'print': pdfMake.createPdf(documentDefinition).print(); break;
      case 'download': pdfMake.createPdf(documentDefinition).download(); break;

      default: pdfMake.createPdf(documentDefinition).open(); break;
    }

  }


  resetForm() {
    this.resume = new Resume();
  }

  getDocumentDefinition() {
    sessionStorage.setItem('resume', JSON.stringify(this.resume));

    return {
      content: 'This is a sample PDF'
    };
  }

  fileChanged(e) {
    const file = e.target.files[0];
    this.getBase64(file);
  }

  getBase64(file) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      console.log(reader.result);
      this.resume.profilePic = reader.result as string;
    };
    reader.onerror = (error) => {
      console.log('Error: ', error);
    };
  }

  addSkill() {
    this.resume.skills.push(new Skill());
  }

}

export class Resume {
    profilePic: string;
    name: string;
    address: string;
    contactNo: number;
    email: string;
    socialProfile: string;
    experiences: Experience[] = [];
    educations: Education[] = [];
    otherDetails: string;
    skills: Skill[] = [];

    constructor() {
        this.experiences.push(new Experience());
        this.educations.push(new Education());
        this.skills.push(new Skill());
    }
}

export class Experience {
    employer: string;
    jobTitle: string;
    jobDescription: string;
    startDate: string;
    experience: number;
}

export class Education {
    degree: string;
    college: string;
    passingYear: string;
    percentage: number;
}

export class Skill {
    value: string;
}

.row{
    padding: 10px;
}

.card{
    margin: 10px;
}

.material-icons{
    font-size: 30px;
}

button span{
    font-size: 22px;
}

.action-buttons button{
    margin : 5px;
}