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 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 {

  ...
}

回答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.

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/43272367/angular-2-import-html2canvas

标签

node.js

angular

import

npm

html2canvas