javascript 在 AngularJS 中使用来自 jsPDF 的 addHTML 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33278959/
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
Using addHTML function from jsPDF in AngularJS
提问by Zlatoroh
I'm trying to create custom printout in my application using jsPDF plugin. Applicaiton uses AngularJs frame work. I tried many different example codes but nothing works... (http://jsfiddle.net/rpaul/p4s5k59s/5/, http://mrrio.github.io/jsPDF/->addHtml, ...).
我正在尝试使用 jsPDF 插件在我的应用程序中创建自定义打印输出。应用程序使用 AngularJs 框架工作。我尝试了许多不同的例子代码，但没有什么作品？（http://jsfiddle.net/rpaul/p4s5k59s/5/，http://mrrio.github.io/jsPDF/- > addHtml，...）。
My code:
我的代码：
Plugins loads:
插件加载：
...resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true,
name: 'Chart',
files: [ 'src/plugins/html2canvas.js', 'src/plugins/jsPDF/jspdf.debug.js']...
Button that triggers the action:
触发动作的按钮：
<button type="button" class="btn btn-w-m btn-success" ng-click="x21ot.printDocument()">Print</button>
And the called function:
和被调用的函数：
this.printDocument = function(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML($("#chart1"),function() {
pdf.save('web.pdf');
});
}
When the action is called nothing happens. I tried different output method : doc.output('dataurlnewwindow');but it does not work.
当这个动作被调用时，什么都不会发生。我尝试了不同的输出方法：doc.output('dataurlnewwindow'); 但它不起作用。
I have debugged addHTMLfunction and found there is onrender event that never triggers.
我调试了addHTML函数，发现有一个永远不会触发的 onrender 事件。
Is this an Angular problem or am I doing something wrong ?
这是一个 Angular 问题还是我做错了什么？
回答by jp36
I was having this same problem, I was able to fix it by including html2canvas.
我遇到了同样的问题，我能够通过包含 html2canvas 来修复它。
npm install html2canvas --save
npm install html2canvas --save
//Since I'm using browserify I then ran
global.html2canvas = require("html2canvas");
(https://github.com/niklasvh/html2canvas)
( https://github.com/niklasvh/html2canvas)
jsPDF relies on that for the addHTML function, but I never saw that mentioned anywhere on the site until I found a bug report about it (https://github.com/MrRio/jsPDF/issues/270)
jsPDF 依赖于它的 addHTML 功能，但我从未在网站上的任何地方看到提到过，直到我找到了关于它的错误报告（https://github.com/MrRio/jsPDF/issues/270）
回答by trudesign
Here's my code,
这是我的代码，
$scope.printDocument = function(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body, function() {
pdf.save('web.pdf');
});
}
I Have html2Canvas required in my service app.js, I can see that there is an addHTML function on the PDF object but it never gets into that callback function, and no errors in the console.
我的服务 app.js 中需要 html2Canvas，我可以看到 PDF 对象上有一个 addHTML 函数，但它从未进入该回调函数，并且控制台中没有错误。
It appears jsPDF.addHTML doesn't get into the options.onrendered function. Trying to track through it, will update here if I find anything.
jsPDF.addHTML 似乎没有进入 options.onrendered 函数。尝试跟踪它，如果我发现任何东西，将在此处更新。
EDIT FIXED: I had installed html2canvas via npm, and had it set require in my app.js file (angular app), but it wasn't working. I then discovered 0.4.1 html2Canvas is available for bower install. Once I added that (have both loaded, too timid to remove the npm version) it works fine. Huzzah!.
编辑修正：我已经通过 npm 安装了 html2canvas，并在我的 app.js 文件（angular app）中设置了 require，但它没有工作。然后我发现 0.4.1 html2Canvas 可用于 bower 安装。一旦我添加了它（两者都加载了，太胆小以至于无法删除 npm 版本）它就可以正常工作了。哈扎！。
回答by Criss Andres Meneses
function HTMLtoPDF(){
//Try this code (Class name: "pdfFromHTML.js"): since the code format important im changing this
html2canvas(document.body, {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF('p', 'mm', 'a4');
var position = 0;
doc.addImage(imgData, 'PNG', 20, 20);
doc.save('Test.pdf');
}
});
}
You need this libraries:
你需要这个库：
<script src="js/jspdf.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/pdfFromHTML.js"></script> /* Call the class */
and you can put a button:
你可以放一个按钮：
<button class="btn btn-primary" onclick="HTMLtoPDF()">Save</button>
