html2canvas to render document PDF with css styling using angular2/typescript

Question

How to generate an output file PDF using html2canvas with angular2

I tried to import the file html2canvas typescript and made a declaration like this to use it

declare let html2canvas: Html2CanvasStatic;

but I get html2canvas is not defined

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

I found this file typescript on github html2canvas typescript

how can use this for my application angular2

Solution 1

I could use html2canvas with the followings changes:

package.json:

 "dependencies": {
     "html2canvas": "0.5.0-beta4",
     "@types/html2canvas": "0.5.32",
 }

After using npm install I could use html2canvas in my component.ts files like this:

import * as html2canvas from "html2canvas"

test() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        var img = canvas.toDataURL()
        window.open(img);
     }
    });

}

Without installing @types/html2canvasI could use the lib via require but not via the import:

html2canvas = require('hmtl2canvas');

Solution 2

If you are using Angular 4 you can include html2canvas under scripts list in .angular-cli.json as below

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

After that import it in your class as below

import * as html2canvas from "html2canvas"

and then use it in your functions as below

html2canvas(parameters);

Solution 3

In 2018:

html2canvas(document.body).then((canvas) => {
    window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
  });

Solution 4

This is in addition to above answer, i.e. add @types/html2canvas to dependencies and add import statement in your code.

However, using the above sample code, I am getting error in VisualStudioCode i.e.

'onrendered' does not exist in type 'Html2CanvasOptions'.

To resolve that, I used "then" as below:

html2canvas(document.body).then((canvas) => {
  document.body.appendChild(canvas);
});

View more solutions

Comments

[Vignesh]

do we need to import html2canvas script in index.html

[PaulCo]

If you use a global script import via angular-cli.json don't import it in your component as you'll load it twice : github.com/angular/angular-cli/wiki/stories-global-scripts