html2canvas 使用 angular2/typescript 以 css 样式呈现文档 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38998844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html2canvas to render document PDF with css styling using angular2/typescript
提问by khalil _diouri
How to generate an output file PDF using html2canvas with angular2
如何使用 html2canvas 和 angular2 生成输出文件 PDF
I tried to import the file html2canvas typescript and made a declaration like this to use it
我试图导入文件 html2canvas 打字稿并做出这样的声明来使用它
declare let html2canvas: Html2CanvasStatic;
but I get html2canvas is not defined
但我得到 html2canvas 未定义
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
I found this file typescript on github html2canvas typescript
我在 github html2canvas typescript上找到了这个文件打字稿
how can use this for my application angular2
如何将它用于我的应用程序 angular2
回答by mszalbach
I could use html2canvas with the followings changes:
我可以使用 html2canvas 进行以下更改：
package.json:
包.json：
"dependencies": {
"html2canvas": "0.5.0-beta4",
"@types/html2canvas": "0.5.32",
}
After using npm installI could use html2canvas in my component.ts files like this:
使用后，npm install我可以在我的 component.ts 文件中使用 html2canvas，如下所示：
import * as html2canvas from "html2canvas"
test() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
}
}
Without installing @types/html2canvasI could use the lib via require but not via the import:
如果不安装，@types/html2canvas我可以通过 require 使用 lib，但不能通过导入使用：
html2canvas = require('hmtl2canvas');
回答by Anil Agrawal
If you are using Angular 4 you can include html2canvas under scripts list in .angular-cli.jsonas below
如果您使用的是 Angular 4，您可以在.angular-cli.json 中的脚本列表下包含html2canvas，如下所示
"scripts": [
"../node_modules/html2canvas/dist/html2canvas.min.js"
]
After that import it in your class as below
之后将其导入您的课程中，如下所示
import * as html2canvas from "html2canvas"
and then use it in your functions as below
然后在您的函数中使用它，如下所示
html2canvas(parameters);
回答by ismaestro
In 2018:
2018年：
html2canvas(document.body).then((canvas) => {
window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
});
回答by pradeep
This is in addition to above answer, i.e. add @types/html2canvas to dependencies and add import statement in your code.
这是对上述答案的补充，即将 @types/html2canvas 添加到依赖项并在您的代码中添加 import 语句。
However, using the above sample code, I am getting error in VisualStudioCode i.e.
但是，使用上面的示例代码，我在 VisualStudioCode 中遇到错误，即
'onrendered' does not exist in type 'Html2CanvasOptions'.
“Html2CanvasOptions”类型中不存在“onrendered”。
To resolve that, I used "then" as below:
为了解决这个问题，我使用了“then”，如下所示：
html2canvas(document.body).then((canvas) => {
document.body.appendChild(canvas);
});
回答by Vinayak Bappanadu
myClickFunction(event: any) {
html2canvas(event.target)
.then((canvas) => {
var img = canvas.toDataURL()
window.open(img);
})
.catch(err => {
console.log("error canvas", err);
});
}
