Angular 2 - Import html2canvas

Question

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 error:

Cannot find module 'html2canvas'

My package file looks like this:

{
  ...
  "scripts": {
    ...
  },
  "dependencies": {
    ...
    "html2canvas": "^0.5.0-beta4",
    ...
  },
  "devDependencies": {
    ...
  }
}

The file on which I'm trying to import the html2canvas is:

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

@Injectable ()
export class pdfGeneratorService {

  ...
}

Ah yeah that's it. If you could make it a answer, I'll set it as the answer. — FlorisdG, Apr 07 '17 at 07:47

score 3 · Accepted Answer · answered Apr 07 '17 at 07:48

3

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.

answered Apr 07 '17 at 07:48

eko

39,722
10
72
98

score 3 · Answer 2 · answered Mar 01 '20 at 15:33

3

in angular 9 i use it this way:

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

answered Mar 01 '20 at 15:33

Ivica Buljević

150
1
8

What version of html2canvas are you using? I am building an angular 13 project and version 1.0.0-rc.1 works, but I can't get version 1.3 or 1.4 working. I need newer functionality render svg objects. – afriedman111 Jan 19 '22 at 18:31
i upgraded app to every angular version since then, also upgraded html2canvas..... right now angular version 13.1 and html2canvas 1.3.3 if you need source code I can post that part, but I think it is very similar to that above, I dont remember that I had big problems while switching between versions.... I use it to produce large table image that I send to C# backend where I make custom pdf report on several pages with headers and footers. – Ivica Buljević Jan 20 '22 at 20:11
I tested it right now, and that code above still works ok, but I switched to "html-to-image" ver. 1.9 hoped to be faster, but didnt notice any change in speed: htmlToImage.toPng(this.head2print.nativeElement).then(_dataUrl => { hdr = _dataUrl; }); – Ivica Buljević Jan 20 '22 at 20:53
Thanks! I got it working with version 1.1 which has the svg support I need. I wasn't able to get the latest to work. – afriedman111 Jan 21 '22 at 21:27

score 1 · Answer 3 · answered Jul 28 '17 at 06:15

1

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

answered Jul 28 '17 at 06:15

pradeep

400
1
4
11

score 1 · Answer 4 · answered Jul 24 '19 at 03:45

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);
        })

+1 I don't like this way of importing but this is the only way working so far after hours of searching and tinkering. — Freek Nortier, Sep 18 '19 at 10:13

Angular 2 - Import html2canvas

4 Answers4

Linked