Angular 2 - Import Html2canvas

I have installed html2canvas on my angular 2 project using npm install html2canvas --save. If I now go to any file and write import * as html2canvas from 'html2canvas' it gives the

Solution 1:

Since Angular2 uses typescript, you need to install the typescript definition files for that module.

It can be installed from @types (if it exists). If it doesn't you can create your own definition file and include it in your project.

Solution 2:

in angular 9 i use it this way:

import html2canvas from'html2canvas';
....
    html2canvas(this.head2print.nativeElement).then(_canvas => {
      hdr = _canvas.toDataURL("image/png");
    });

Solution 3:

Also, the onrendered option for callback function may not work. Instead, you may use "then" as below:

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

https://stackoverflow.com/a/45366038/3119507

Solution 4:

Ran into the same issue running Angular 8. It still didn't work after installing the @types. What worked for me was to include the html2canvas library using require instead.

const html2canvas = require('../../../node_modules/html2canvas');

Then to take the screenshot:

@ViewChild('screenshotCanvas') screenCanvas: ElementRef;

       html2canvas(this.screenCanvas.nativeElement).then(canvas => {
            var imgData = canvas.toDataURL("image/png");
            console.log("ENTER takeScreenshot: ",imgData )
            document.body.appendChild(imgData);
        })