Clever Geek Handbook

Angular 2 - Importing html2canvas

I installed html2canvas

in my project angular 2

using npm install html2canvas --save

. If I go to any file now and write import * as html2canvas from 'html2canvas'

, it gives an error:

Cannot find module 'html2canvas'

My package file looks like this:

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

The file I'm trying to import into html2canvas

is:

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

@Injectable ()
export class pdfGeneratorService {

  ...
}
+3


source to share


3 answers


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



It can be installed from @types

(if it exists). If not, you can create your own definition file and include it in your project.

+3


source


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

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


fooobar.com/questions/1254937 / ...

+1


source


Faced the same problem as Angular 8. It still didn't work after installing @types . It was helpful for me to include the html2canvas library using the require command instead.

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

Then take a 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);
        })
0


source






More articles:


All Articles