Angular2 - Creating PDF documents from HTML content with jspdf

Question

Angular2 - Creating PDF documents from HTML content with jspdf

For my current project, I am in need of generating a PDF of the page that the user is currently viewing. To accomplish this task, I have decided to utilize jspdf. Since I have HTML content that needs to be converted into a PDF format, I will make use of the addHTML() function provided by jspdf. There are several discussions on this topic, where some suggest:

You can either opt for html2canvas or rasterizehtml.

After considering both options, I have chosen to go with html2canvas. Below is a snippet of the code that I have implemented so far:

import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 from 'd3';
import * as html2canvas from 'html2canvas';

@Injectable ()
export class pdfGeneratorService {

  @ViewChild('to-pdf') element: ElementRef;

  GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');

        pdf.addHTML(canvas, function() {
          pdf.save('web.pdf');
        });
      }
    });
  }
}

However, upon invoking this function, I encounter an error message in the console:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:4 caused by: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js

This leaves me puzzled as to why I am prompted to use html2canvas despite passing a canvas parameter. What could be the reason behind this requirement?

angular pdf typescript jspdf html2canvas

Answer 1

Answer №1

After some experimentation, I discovered a solution that worked well.

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

I found that adding the above script to the index.html file did the trick (although it could potentially be included elsewhere in the project).

Next, I implemented the following JavaScript code:

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

This method no longer requires referencing html2canvas within the code.
You can now safely remove the following import statement:

import * as html2canvas from 'html2canvas';

Answer 2

After some experimentation, I discovered a solution that worked well.

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

I found that adding the above script to the index.html file did the trick (although it could potentially be included elsewhere in the project).

Next, I implemented the following JavaScript code:

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

This method no longer requires referencing html2canvas within the code.
You can now safely remove the following import statement:

import * as html2canvas from 'html2canvas';

Answer 3

Answer №2

If you prefer not to use cdn scripts and would rather take an (angular) approach, here is a method that worked for me in Angular 6:

By using this method, you will have better support and autocomplete in the editor, and it will allow you to avoid relying on cdn scripts (if you wish to avoid them, like I do).

I found the solution based on an excellent answer here, which was difficult for me to find initially. Therefore, I am sharing what was mentioned in that answer, as it helped me utilize jsPDF in Angular 6 (all credit goes to the original author of the answer).

You need to run these commands:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Add the following to angular-cli.json:

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

In your html file:

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

In your component TypeScript file:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GeneratePdfComponent 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, generating a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

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

Answer 4

If you prefer not to use cdn scripts and would rather take an (angular) approach, here is a method that worked for me in Angular 6:

By using this method, you will have better support and autocomplete in the editor, and it will allow you to avoid relying on cdn scripts (if you wish to avoid them, like I do).

I found the solution based on an excellent answer here, which was difficult for me to find initially. Therefore, I am sharing what was mentioned in that answer, as it helped me utilize jsPDF in Angular 6 (all credit goes to the original author of the answer).

You need to run these commands:

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save

Add the following to angular-cli.json:

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

In your html file:

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

In your component TypeScript file:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  ...
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class GeneratePdfComponent 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, generating a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

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

Answer 5

Answer №3

If you're looking to convert an HTML div to a PDF, consider using the convenient tool html2pdf. With just a few lines of code, you can easily accomplish this task.

var item = document.getElementById('item-to-convert');
html2pdf(item);

Answer 6

If you're looking to convert an HTML div to a PDF, consider using the convenient tool html2pdf. With just a few lines of code, you can easily accomplish this task.

var item = document.getElementById('item-to-convert');
html2pdf(item);

Answer 7

Answer №4

Here's an example for you to try out:

CreatePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');    
        var img = canvas.toDataURL("image/png");
        pdf.addImage(img, 'PNG', 10, 10, 580, 300);
        pdf.save('output.pdf');
      }
    });
  }

Answer 8

Here's an example for you to try out:

CreatePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');    
        var img = canvas.toDataURL("image/png");
        pdf.addImage(img, 'PNG', 10, 10, 580, 300);
        pdf.save('output.pdf');
      }
    });
  }

Answer 9

Answer №5

Follow this method StackBlitz sample

import {jsPDF} from 'jspdf';

@ViewChild('content', {static: false}) content: ElementRef;


public createPDF() {
   const pdfDoc = new jsPDF();

   const specialElements = {
      '#editor': function (element, renderer) {
       return true;
       }
   };

   const contentElement = this.content.nativeElement;

   pdfDoc.fromHTML(contentElement.innerHTML, 15, 15, {
      width: 190,
     'elementHandlers': specialElements
   });

   pdfDoc.save('myDocument.pdf');
}

Answer 10

Follow this method StackBlitz sample

import {jsPDF} from 'jspdf';

@ViewChild('content', {static: false}) content: ElementRef;


public createPDF() {
   const pdfDoc = new jsPDF();

   const specialElements = {
      '#editor': function (element, renderer) {
       return true;
       }
   };

   const contentElement = this.content.nativeElement;

   pdfDoc.fromHTML(contentElement.innerHTML, 15, 15, {
      width: 190,
     'elementHandlers': specialElements
   });

   pdfDoc.save('myDocument.pdf');
}

Answer 11

Answer №6

For those new to this query, make sure you check the version of jspdf you are using:

1.xx:

You will need to install html2canvas first

   npm install html2canvas

Then add it to the scripts section in angular.json

//.angular.json  
 "scripts": [ 
               // ensure correct path is used 
               "node_modules/html2canvas/dist/html2canvas.min.js"
            ]

   // let data = this.htmlData.nativeElement; if you use it with @ViewChild('htmlData') 
    htmlData:ElementRef;
    let data = document.body;
    html2canvas(data).then(canvas => {
    // Some necessary setting options
    const imgWidth = 208;
    const pageHeight = 295;
    const imgHeight = canvas.height * imgWidth / canvas.width;
    const heightLeft = imgHeight;

    const contentDataURL = canvas.toDataURL('image/png')
    let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
    var position = 0;
    pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
    pdf.save('new-file.pdf'); // PDF generated
    });

2.xx:

There are notable changes between versions 1.xx and 2.xx:

Deprecated APIs have been removed. These include: addHTML, fromHTML, html2pdf, addSvg, addButton, addTextField, addChoiceField, cellInitialize, setFontStyle, setFontType, clip_fixed.

The previous code should be adjusted as follows:

 // let data = this.htmlData.nativeElement; if you use it with @ViewChild('htmlData') 
 htmlData:ElementRef;
 let data = document.body;
    let options : any = {
      orientation: 'p',
      unit: 'px',
      format: 'a0',
      };
    let doc = new jsPDF(options);
     doc.html(data.innerHTML, {
      callback: function (doc) {
            doc.save("angular-demo.pdf");
          },
      margin:15,
      x: 10,
      y: 10
    });
  }

demo

Note that in version 2.xx, there's no need to manually install html2canvas via npm or include the script in angular.json/index.html as it is now handled dynamically internally.

Answer 12

For those new to this query, make sure you check the version of jspdf you are using:

1.xx:

You will need to install html2canvas first

   npm install html2canvas

Then add it to the scripts section in angular.json

//.angular.json  
 "scripts": [ 
               // ensure correct path is used 
               "node_modules/html2canvas/dist/html2canvas.min.js"
            ]

   // let data = this.htmlData.nativeElement; if you use it with @ViewChild('htmlData') 
    htmlData:ElementRef;
    let data = document.body;
    html2canvas(data).then(canvas => {
    // Some necessary setting options
    const imgWidth = 208;
    const pageHeight = 295;
    const imgHeight = canvas.height * imgWidth / canvas.width;
    const heightLeft = imgHeight;

    const contentDataURL = canvas.toDataURL('image/png')
    let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
    var position = 0;
    pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
    pdf.save('new-file.pdf'); // PDF generated
    });

2.xx:

There are notable changes between versions 1.xx and 2.xx:

Deprecated APIs have been removed. These include: addHTML, fromHTML, html2pdf, addSvg, addButton, addTextField, addChoiceField, cellInitialize, setFontStyle, setFontType, clip_fixed.

The previous code should be adjusted as follows:

 // let data = this.htmlData.nativeElement; if you use it with @ViewChild('htmlData') 
 htmlData:ElementRef;
 let data = document.body;
    let options : any = {
      orientation: 'p',
      unit: 'px',
      format: 'a0',
      };
    let doc = new jsPDF(options);
     doc.html(data.innerHTML, {
      callback: function (doc) {
            doc.save("angular-demo.pdf");
          },
      margin:15,
      x: 10,
      y: 10
    });
  }

demo

Note that in version 2.xx, there's no need to manually install html2canvas via npm or include the script in angular.json/index.html as it is now handled dynamically internally.

Angular2 - Creating PDF documents from HTML content with jspdf

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

1.xx:

2.xx:

Similar questions

Encountering a Typescript issue while trying to access two distinct values dynamically from within a single object

Error in Typescript/React: Unable to access the property 'MaxEmailLength' as it is undefined

When attempting to Dockerize an Angular CLI app, nothing seemed to happen

How can one dynamically update a page in Angular when the path is changed?

Creating a personalized theme for Material UI 5.0 using Typescript with React

The type definition file for '@types' is not present in Ionic's code base

Saving a PDF file to iBooks using WKWebView and downloading a PDF file directly from a provided

Extract a string value from a TypeScript enum

Incorporate a typescript library into your Angular application

The return type is not undefined but the switch covers all possibilities

Is there a way to stop the BS modal from appearing when I hit Enter after filling out a form?

Exporting numerous modules from an NPM package

Circular dependency situation encountered in Angular 2 shared module

Can my https.post function determine the specific API function to call?

Field that only permits numerical input without triggering events for other characters

Removing a nested data object in Angular with NGXS

Express encounters difficulty in processing Chunked Post Data

Create a nested array of subcategories within an array object

Tips for setting values to the child component property in Angular 4

Recording changes in SVG size in Angular 2