javascript - 生成可使用 Angular JS 下载的 pdf

Question

我有一个使用 Angular JS 构建的应用程序，我想要一个按钮来生成和下载 div 区域的 pdf(这只是绑定(bind)数据)

This is close to what I would like, but it does not outline how this would be executed

任何帮助都会很棒，我也尝试过 jsPDF，但它不适用于 Angular。

Answer 1

我的 jsPDF 在 Angular 应用程序中运行良好:

angular.module('YourApp')
  .factory('InvoiceGenerator', function() {
    return {
      makeInvoice: function(subject, reference, from, to, /* whatever you need to print out... */ ) {
        getLogo(window.location.origin+'/images/bot-objects-full-logo.png',
          function(imgData) {
            var doc = new window.jsPDF();
            var x=0, y=0;

            doc.addImage(imgData, 'PNG', 10, 10, 50, 15);

            doc.setFontSize(12);
            x=10;y=30;
            from.forEach(function(line) {
              doc.text(x, y, line);
              y += 5;
            });

            x=145;y=50;
            to.forEach(function(line) {
              doc.text(x, y, line);
              y += 5;
            });

            x=10;y=80; doc.text(x, y, 'Subject: '+subject);
            y+=5;      doc.text(x, y, 'Reference: '+reference);

            doc.setLineWidth(0.5);
            y=110;     doc.line(20, y, 180, y); // horizontal line

            /* do whatever you need to do with the other sutff you need to print out ... */

            doc.save('foo.pdf');
          });
       }
    }
}

然后该代码可以在您的项目中使用:

.controller('YourAppController',
   ['$scope', 'InvoiceGenerator', 
   function($scope, InvoiceGenerator)) {
    $scope.printInvoice = function(invoice) {
        InvoiceGenerator.makeInvoice('This is an invoice',
                                     'IV1234', 
                                     ['Your firm',
                                      'your street',
                                      'your city',
                                      'your country'
                                     ], 
                                     ['Your client',
                                      'his street',
                                      'his city',
                                      'his country'
                                     ],
                                     /* 'other stuff you want to printout' */
                                     )
    }
}

然后您所需要做的就是根据您的需求完成它，并在任何需要的地方使用它。

所以你的断言“我也尝试过jsPDF，但它不能很好地与Angular一起工作。”是错误的，你可能只是遇到了问题，所以你应该遵循SO的方式并展示你所拥有的尝试帮助我们帮助您解决问题。