Angular 6 saving material wizard data in pdf format on client side

Question

I am trying to print the info shown in angular material wizard in pdf format, I have tried to use jspdf but it is not working, it is giving this error:

You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js

The code I am using is:

const elementToPrint = document.getElementById('completed'); // The html element to become a pdf
const pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(elementToPrint, () => {
  pdf.save('web.pdf');
});

I have already installed html2canvas using npm & I am importing it in the same ts file.

What is causing that error ?

The same code above works fine if I include this script in the index file

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

But it prints pdf with very low quality, as if it used a pixelated snapshot of the div that I am capturing

Is there something better suited for this task than jsPdf? as I didn't find any similar library, I found some libraries on npm for angularJS but not angular2+, I am searching for some library so that I can build the pdf document:

1- From multiple divs (the wizard steps)

2- Make a pdf client side that include the info of the wizard.

3- Should be of high quality (not pixelated)

Example for a good quality tool that I found only in AngularJS

Answer 1

The following worked well for me in Angular 6 using jsPDF library:

Using this way will give you better support & autocomplete in the editor & will help you avoid depending on cdn scripts (if you wanna avoid them, like me)

Based on the excellent answer here & since it was hard for me to find that answer, I am re-sharing what was stated in it & helped me use jsPDF in Angular 6 (all credit goes to the original author of this answer)

You should run these cmds:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Add following in angular-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

html:

<button (click)="download()">download </button>

component ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GenratePdfComponent implements OnInit {

  constructor(
    @Inject('Window') private window: Window,
    ) { }

  download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }
}

Using the code above has produced pdfs of good quality, but if someone has a better way to create pdf from html in Angular 2+, please feel free to share it