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 {...}Best Answer
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.
in angular 9 i use it this way:
import html2canvas from 'html2canvas';....html2canvas(this.head2print.nativeElement).then(_canvas => {hdr = _canvas.toDataURL("image/png");});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
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);})