PHP table + pdfMake + AngularJS

Question

I'm a noobie of PHP and AngularJS.

I have a webpage that communicates to a web serves with PHP - AJAX. It queries a database, and echoes the result (a big table) in an html placeholder.

I want to print the content of that table in a downloadable PDF file when the user pushes a button.

I want to use PDFmake and now it works well for test purpose, but how can I pass that content of my table to AngularJS' app? Maybe should I pass table's id to docDefinition content? In that case I don't know how to do that.

Note: Maybe my approach is uncorrent cause I have to relegate PHP to different tasks and use AngularJS to query the Database, but for now I want to mantain this approach.

Thank You

What do you mean by "pass that content to angularJS app"? Did you try the approach explained at https://stackoverflow.com/questions/34049956/generate-pdf-from-html-using-pdfmake-in-angularjs (Sidenote: Doesn't seem to matter for your question whether you're using php or whatever to generate your HTML, so not really part of your question) — Capricorn, Jun 17 '18 at 17:29
Thank you but sorry, I can't understand. What is html2canvas? I mean, how can I access table's data from AngularJS (for pdf printing)? I have to pass table's id from my php page to Angular app? If yes, how can I do that? I'm a bit confused — filb, Jun 17 '18 at 18:23

Stefano Mozart · Accepted Answer · 2018-07-03T17:03:34.280

I suggest you use an angular service (as explained in the docs )

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
    }
  });
}
]);

Then, you can use it in a controller to fetch data from the back-end and build a table structure in PDFmake's table format:

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()
    }
  }
]);

PHP table + pdfMake + AngularJS

1 Answers1