在AngularJS中使用jsPDF中的addHTML函数

Question

我正在尝试使用jsPDF插件在我的应用程序中创建自定义打印输出。 Applicaiton使用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问题，还是我做错了什么？

Answer 1

我遇到了同样的问题，可以通过包含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 ）时，我才在网站上的任何地方都没有提到它

Answer 2

这是我的代码，

$scope.printDocument = function(){
  var pdf = new jsPDF('p','pt','a4');
  pdf.addHTML(document.body,  function() {
    pdf.save('web.pdf');
  });
}

我的服务app.js中需要html2Canvas，我可以看到PDF对象上有一个addHTML函数，但它从未进入该回调函数，并且控制台中没有错误。

看来jsPDF.addHTML没有进入options.onrendered函数。 尝试进行跟踪，如果发现任何问题，将在此处进行更新。

修改后的问题：我已经通过npm安装了html2canvas，并在我的app.js文件（角度应用程序）中设置了require，但是它没有用。 然后，我发现0.4.1 html2Canvas可用于凉亭安装。 一旦我添加了它（都加载了，太胆小以至于无法删除npm版本），它就可以正常工作。 ！！

Answer 3

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>