Angular | Creating PDF Documents

Create App

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">ng new app

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">cd app

Additional modules

Install jsPDF for creating PDF documents with JavaScript

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">npm install       jspdf --save
npm install types/jspdf --save

Demo Page

Create demo page

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">ng generate component pages/PDF

Add demo page to routing

src/app/app-routing.modules.ts

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PDFComponent } from './pages/pdf/component';

const routes: Routes = [
	{	path: '',	redirectTo: 'pdf',	pathMatch: 'full',	},
	{	path: 'pdf',	component: PDFComponent,			},
];

@NgModule({
	imports: [RouterModule.forRoot(routes)],
	exports: [RouterModule],
})
export class AppRoutingModule {}

Add PDF functionality

Modify pdf.component.html

src/app/pages/pdf/pdf.component.html

Modify pdf.component.ts

src/app/pages/pdf/pdf.component.ts

Add import for jsPDF

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">import { jsPDF } from 'jspdf';