Angular 2 - 导入 html2canvas

Question

我已经使用 npm install html2canvas --save 在我的 angular 2 项目上安装了 html2canvas。如果我现在转到任何文件并写入 import * as html2canvas from 'html2canvas' 它会给出错误：

Cannot find module 'html2canvas'

我的包文件如下所示：

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

我尝试导入 html2canvas 的文件是：

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

@Injectable ()
export class pdfGeneratorService {

  ...
}

Answer 1

由于 Angular2 使用 typescript，您需要为该模块安装 typescript 定义文件。

它可以从 @types（如果存在）安装。如果没有，您可以创建自己的定义文件并将其包含在您的项目中。

Answer 2

此外，回调函数的 onrendered 选项可能不起作用。相反，您可以使用 "then"，如下所示：

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

Answer 3

运行成同一个问题运行 Angular 8.安装了@types后还是不行。对我有用的是使用 require 来包含 html2canvas 库。

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

然后截图：

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

Answer 4

在angular 9中我是这样使用的：

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

Angular 2 - 导入 html2canvas

Angular 2 - Import html2canvas

import

node.js

npm

html2canvas

angular