Aaron Oberländer Aaron Oberländer - 6 months ago 86
AngularJS Question

Use jsPDF to Populate PDF with JSON Data

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

Answer

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() { ...