Question

如何使用带有angular2

的html2canvas生成输出文件PDF

我尝试导入文件html2canvas typescript并发出这样的声明来使用它

declare let html2canvas: Html2CanvasStatic;

但是我没有定义html2canvas

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

我在github html2canvas typescript

上找到了这个文件打字稿

如何将此用于我的应用程序angular2

Answer 1

我可以使用html2canvas进行以下更改：

的package.json：

 "dependencies": {
     "html2canvas": "0.5.0-beta4",
     "@types/html2canvas": "0.5.32",
 }

使用npm install后，我可以在我的component.ts文件中使用html2canvas：

import * as html2canvas from "html2canvas"

test() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        var img = canvas.toDataURL()
        window.open(img);
     }
    });

}

不安装@types/html2canvas我可以通过require使用lib，但不能通过import：

html2canvas = require('hmtl2canvas');

Answer 2

如果您使用的是Angular 4，可以在 .angular-cli.json 的脚本列表下包含html2canvas，如下所示

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

之后将其导入您的班级，如下所示

import * as html2canvas from "html2canvas"

然后在您的函数中使用它，如下所示

html2canvas(parameters);

Answer 3

2018年：

html2canvas(document.body).then((canvas) => {
    window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
  });

Answer 4

这是上述答案的补充，即将@ types / html2canvas添加到依赖项中，并在代码中添加import语句。

但是，使用上面的示例代码，我在VisualStudioCode中出现错误，即

类型'Html2CanvasOptions'中不存在
'onrendered'。

为了解决这个问题，我使用了“then”，如下所示：

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

Answer 5

myClickFunction(event: any) {
html2canvas(event.target)
  .then((canvas) => {
    var img = canvas.toDataURL()
    window.open(img);
  })
  .catch(err => {
    console.log("error canvas", err);
  });
}

html2canvas使用angular2 / typescript以css样式呈现文档PDF

5 个答案: