Use jsPDF to Populate PDF with JSON Data

Question

I want to create letters to clients, using json data such as {{client.name}}, {{client.id}}, etc.. Currently, when I try to create the PDF I get undefined values for my json data input. This is my HTML:

`<!DOCTYPE html>
 <html lang="en">
 <html ng-app="app">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" />
<% include headerpdf %>
<% include navbar %>
<body>
<div id="render_me">
<div class="container">
<div ng-controller="ClientCtrl">
<div class="datagrid"><table>  
<thead> 
 <tr> 
 <th> ID </th>
 <th> Phone </th>
 <th> Address </th>
 <th> Zip </th>
 </tr>
</thead>
 <tbody>
 <tr ng-repeat="client in clients | orderBy:'id' | filter:{id:clientId} | limitTo: 1">
 <td>
 {{client.id}}
 </td>
 <td>{{client.phone}} </td>
 <td>{{client.address}}</td>
 <td>{{client.zip}}</td>
 </tr>
 </tbody>
 </table>
 <a href="#">Download Test PDF</a>
 <script type="text/javascript">
 var doc = new jsPDF();
 // We'll make our own renderer to skip this editor
 var specialElementHandlers = {
 '#editor': function(element, renderer){
    return true;
 }
 };
 doc.fromHTML($('#render_me').get(0), 15, 15, {
 'width': 170, 
 'elementHandlers': specialElementHandlers
  });
  //doc.save('Test.pdf');
  $('a').click(function(){
  doc.save('TestHTMLDoc.pdf');
  });
 </script>`

Here is the clientCtrl :

var myApp = angular.module('app', ['ngRoute']);

myApp.config(['$routeProvider', '$locationProvider',     function($routeProvider, $locationProvider)  {
    // configure the routing rules here
    $locationProvider.html5Mode({enabled : true, requireBase : false});
    $routeProvider.when('/client/:id', {
        controller: 'viewController'
  })}]);

myApp.controller('ClientCtrl', ['$scope', '$http', '$routeParams',    function($scope, $http, $routeParams) {
  $scope.clients = [];
  $http.get('/client').success(function(data, status, headers, config) {
    $scope.clients = data;
    if (data == "") {
        $scope.clients = [];
    }
  }).error(function(data, status, headers, config) {
      console.log("Ops: could not get any data");
  });
  $scope.addClient = function() {
    $http.post('/client', {
        name : $scope.clientName,
        age : $scope.clientAge,
        birthday : $scope.clientBirthday,
        canreceivetxt : $scope.clientcanreceivetxt,
        phone : $scope.clientPhone,
        address : $scope.clientAddress,
        ssn : $scope.clientSsn,
        }).success(function(data, status, headers, config) {
        $scope.clients.push({
        name : $scope.clientName,
        age : $scope.clientAge,
        birthday : $scope.clientBirthday,
        canreceivetxt : $scope.clientcanreceivetxt,
        phone : $scope.clientPhone,
        address : $scope.clientAddress,
        ssn : $scope.clientSsn,
        });
        $scope.clientName = '';
        $scope.clientAge = '';
        $scope.clientBirthday = '';
        $scope.clientcanreceivetxt = '';
        $scope.clientPhone = '';
        $scope.clientAddress = '';
        $scope.clientSsn = '';
    }).error(function(data, status, headers, config) {
        console.log("Ops: " + data);
    });
 };

   $scope.clientId = document.location.href.split('client/')[1];

}]);

 myApp.controller('viewController',['$scope','$http', '$location' ,  '$routeParams',function($scope, $http, $location, $routeParams){

 $http.get('/client/' + $routeParams.id).success(function(data) {
    $scope.clients = data;
    $scope.client=$scope.clients[$routeParams.id]
 })}]);

virth · Accepted Answer · 2016-06-01 20:05:51Z

1

clients has to be defined on your ClientCtrl. Could you post your controller? maybe clients is not on your $scope or is not initialized correctly

EDIT !

--> Final solution was to move the doc.fromHTML($(..... inside the $('a').click(function() { ...

edited Jun 1, 2016 at 20:05

answered Jun 1, 2016 at 19:11

virth

667 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

virth Over a year ago

try $scope.clients = data.result; instead of $scope.clients = data; inside of the .sucess function of your $.get('/client')

Aaron Oberländer Over a year ago

When this is implemented, now the get method result is not viewable in my ng-repeat

virth Over a year ago

ok, so I was wrong. so with $scope.clients = data; the ng-repeat works but {{client.phone}} is empty right? then I would try to mock the client at first: $scope.clients = [{phone: '123', adress: 'test', zip: '123'}]; - if this works then your server is not responding with the objects you expect

Aaron Oberländer Over a year ago

Well, it is not empty but rather undefined. All data in handlebars is listed as undefined in pdf

virth Over a year ago

yea, undefined means that the property is just not existing.. maybe your server passes uppercase properties like {{client.Phone}}

|

Collectives™ on Stack Overflow

Use jsPDF to Populate PDF with JSON Data

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related