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

【问题标题】：html2canvas to render document PDF with css styling using angular2/typescripthtml2canvas 使用 angular2/typescript 以 css 样式呈现文档 PDF
【发布时间】：2016-12-24 05:48:32
【问题描述】：

如何使用带有angular2的html2canvas生成输出文件PDF

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

declare let html2canvas: Html2CanvasStatic;

但我得到 html2canvas 没有定义

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

我在github上找到了这个文件打字稿html2canvas typescript

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

【问题讨论】：

标签： pdf angular typescript html2canvas

【解决方案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');

【讨论】：

是否需要在index.html中导入html2canvas脚本

【解决方案2】：

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

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

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

import * as html2canvas from "html2canvas"

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

html2canvas(parameters);

【讨论】：

如果您通过 angular-cli.json 使用全局脚本导入不要将其导入组件中，因为您将加载两次：github.com/angular/angular-cli/wiki/stories-global-scripts

【解决方案3】：

2018 年：

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

【讨论】：

【解决方案4】：

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

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

“Html2CanvasOptions”类型中不存在“onrendered”。

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

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

【讨论】：

【解决方案5】：

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

【讨论】：