带有 Angular 的 html2canvas 无法按预期工作答案

【问题标题】：html2canvas with Angular not working as intended带有 Angular 的 html2canvas 无法按预期工作
【发布时间】：2020-09-18 13:39:03
【问题描述】：

我需要第二双眼睛来找出 html2canvas 不工作的原因。我不确定我在这里缺少什么。我已经经历了几次，它不应该这么难。恐怕它没有以某种方式正确实施。我会尽我所能。任何帮助都会很棒！我要做的就是确保它正常工作，并且我正在尝试执行一项简单的任务，即在单击按钮时显示带有 id 的 div。现在，当我单击按钮时没有任何反应，就好像它没有正确实现一样

HTML

<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>

<button (click)="clickMe()">Open html2canvas screen shot</button>

Component.ts

import html2canvas from 'html2canvas';


clickMe() {
html2canvas(document.querySelector("#capture")).then(canvas => {
  document.body.appendChild(canvas)
});
 }

节点模块

angular.json

  "scripts": [
          "node_modules/html2canvas/dist/html2canvas.min.js"
        ]

【问题讨论】：

标签： angular typescript html2canvas

【解决方案1】：

请检查您的控制台输出。如果出现ERROR TypeError: html2canvas_1.default is not a function 之类的错误，请尝试更改您的包导入如下：

import * as html2canvas from 'html2canvas';

【讨论】：

我正在输入代码'此表达式不可调用。类型 'typeof import("/node_modules/html2canvas/dist/types/index")' 没有调用 signatures.ts(2349)'
一个关于codesandbox或stackblitz的最小可重现示例会很有帮助。

【解决方案2】：

试试看，对我有用

h2c: any = html2canvas;
  captureScreen()
  {
    this.h2c(document.body).then((canvas) => {
      this.downloadLink.nativeElement.href = canvas.toDataURL('image/png');
      this.downloadLink.nativeElement.download = 'Screenshot.png';
      this.downloadLink.nativeElement.click();
    });
  }

【讨论】：