PHP table + pdfMake + AngularJS

PHP table + pdfMake + AngularJS

我是 PHP 和 AngularJS 的菜鸟。

我有一个网页可以通过 PHP - AJAX 与 Web 服务通信。它查询数据库,并在 html 占位符中回显结果(一个大的 table)。

我想在用户按下按钮时在可下载的 PDF 文件中打印 table 的内容。

我想使用 PDFmake,现在它可以很好地用于测试目的,但是如何将我的 table 的内容传递给 AngularJS' 应用程序? 也许我应该将 table 的 id 传递给 docDefinition 内容?那样的话我就不知道怎么办了。

注意:也许我的方法不正确,因为我必须将 PHP 分配给不同的任务并使用 AngularJS 查询数据库,但现在我想维护这个方法。

谢谢

我建议您使用 angular 服务(如 文档中所述 )

var bigTableApp = angular.module('bigTable',[])

bigTableApp.factory('BigTableSrv', ['$resource',
function($resource) {
  return $resource('URL_to_php_backend', {}, {
    query: {
      method: 'GET',
      params: {param1: 'value 1', param2: 'value 2'},
      isArray: true
    }
  });
}
]);

然后,您可以在控制器中使用它从后端获取数据并在 PDFmake 的 table format:

中构建一个 table 结构
bigTableApp.controller('BigTableController', ['$scope', 'BigTableSrv',
  function BigTableController($scope, BigTableSrv) {
    $scope.bigTable = BigTableSrv.query();
    $scope.pdfMakeTable = {
      // array of column widths, expand as needed
      widths: [10, *, 130],
      body: []
    };

    $scope.printTable = function() {
      pdfMakeTable.body = $scope.bigTable.map(el => {
        // process each element of your "big table" to one line of the 
        // pdfMake table, size of return array must match that of the widths array
        return [el.prop1, el.prop2, el.prop3]
      });

      // create the pdfMake document
      let docDefinition = {
        content: [ pdfMakeTable ]
      }

      // print your pdf
      pdfMake.creatPdf(docDefinition).print()
    }
  }
]);