在 AngularJS 中使用 jsPDF 中的 addHTML 函数
Using addHTML function from jsPDF in AngularJS
我正在尝试使用 jsPDF 插件在我的应用程序中创建自定义打印输出。应用程序使用 AngularJs 框架工作。我尝试了许多不同的示例代码,但没有任何效果......
(http://jsfiddle.net/rpaul/p4s5k59s/5/, http://mrrio.github.io/jsPDF/ ->addHtml, ...).
我的代码:
插件加载:
...resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true,
name: 'Chart',
files: [ 'src/plugins/html2canvas.js', 'src/plugins/jsPDF/jspdf.debug.js']...
触发动作的按钮:
<button type="button" class="btn btn-w-m btn-success" ng-click="x21ot.printDocument()">Print</button>
以及调用的函数:
this.printDocument = function(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML($("#chart1"),function() {
pdf.save('web.pdf');
});
}
调用动作时什么也没有发生。我尝试了不同的输出方法:doc.output('dataurlnewwindow'); 但它不起作用。
我调试了 addHTML 函数,发现有一个永远不会触发的 onrender 事件。
这是 Angular 问题还是我做错了什么?
我遇到了同样的问题,我可以通过包含 html2canvas 来解决它。
npm install html2canvas --save
//Since I'm using browserify I then ran
global.html2canvas = require("html2canvas");
(https://github.com/niklasvh/html2canvas)
jsPDF 的 addHTML 函数依赖于它,但在我发现有关它的错误报告之前,我从未在网站上的任何地方看到它被提及 (https://github.com/MrRio/jsPDF/issues/270)
这是我的代码,
$scope.printDocument = function(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body, function() {
pdf.save('web.pdf');
});
}
我的服务需要 html2Canvas app.js,我可以看到 PDF 对象上有一个 addHTML 函数,但它从未进入该回调函数,并且控制台中没有错误。
jsPDF.addHTML 似乎没有进入 options.onrendered 函数。正在尝试跟踪它,如果我发现任何东西会在这里更新。
已修复编辑:我通过 npm 安装了 html2canvas,并在我的 app.js 文件(angular 应用程序)中设置了它的要求,但它没有用。然后我发现 0.4.1 html2Canvas 可用于 bower 安装。一旦我添加了它(两者都已加载,太胆小而无法删除 npm 版本),它就可以正常工作。万岁!
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');
}
});
}
你需要这个库:
<script src="js/jspdf.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/pdfFromHTML.js"></script> /* Call the class */
你可以放一个按钮:
<button class="btn btn-primary" onclick="HTMLtoPDF()">Save</button>
我正在尝试使用 jsPDF 插件在我的应用程序中创建自定义打印输出。应用程序使用 AngularJs 框架工作。我尝试了许多不同的示例代码,但没有任何效果...... (http://jsfiddle.net/rpaul/p4s5k59s/5/, http://mrrio.github.io/jsPDF/ ->addHtml, ...).
我的代码:
插件加载:
...resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true,
name: 'Chart',
files: [ 'src/plugins/html2canvas.js', 'src/plugins/jsPDF/jspdf.debug.js']...
触发动作的按钮:
<button type="button" class="btn btn-w-m btn-success" ng-click="x21ot.printDocument()">Print</button>
以及调用的函数:
this.printDocument = function(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML($("#chart1"),function() {
pdf.save('web.pdf');
});
}
调用动作时什么也没有发生。我尝试了不同的输出方法:doc.output('dataurlnewwindow'); 但它不起作用。
我调试了 addHTML 函数,发现有一个永远不会触发的 onrender 事件。
这是 Angular 问题还是我做错了什么?
我遇到了同样的问题,我可以通过包含 html2canvas 来解决它。
npm install html2canvas --save
//Since I'm using browserify I then ran
global.html2canvas = require("html2canvas");
(https://github.com/niklasvh/html2canvas)
jsPDF 的 addHTML 函数依赖于它,但在我发现有关它的错误报告之前,我从未在网站上的任何地方看到它被提及 (https://github.com/MrRio/jsPDF/issues/270)
这是我的代码,
$scope.printDocument = function(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body, function() {
pdf.save('web.pdf');
});
}
我的服务需要 html2Canvas app.js,我可以看到 PDF 对象上有一个 addHTML 函数,但它从未进入该回调函数,并且控制台中没有错误。
jsPDF.addHTML 似乎没有进入 options.onrendered 函数。正在尝试跟踪它,如果我发现任何东西会在这里更新。
已修复编辑:我通过 npm 安装了 html2canvas,并在我的 app.js 文件(angular 应用程序)中设置了它的要求,但它没有用。然后我发现 0.4.1 html2Canvas 可用于 bower 安装。一旦我添加了它(两者都已加载,太胆小而无法删除 npm 版本),它就可以正常工作。万岁!
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');
}
});
}
你需要这个库:
<script src="js/jspdf.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/pdfFromHTML.js"></script> /* Call the class */
你可以放一个按钮:
<button class="btn btn-primary" onclick="HTMLtoPDF()">Save</button>