使用 jsPDF 使用 JSON 数据填充 PDF答案

【问题标题】：Use jsPDF to Populate PDF with JSON Data使用 jsPDF 使用 JSON 数据填充 PDF
【发布时间】：2016-06-01 18:35:55
【问题描述】：

我想创建给客户的信件，使用 json 数据，例如 {{client.name}}、{{client.id}} 等。目前，当我尝试创建 PDF 时，我的 json 数据输入得到未定义的值。这是我的 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>`

这里是客户端Ctrl：

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

【问题讨论】：

标签： javascript angularjs json pdf jspdf

【解决方案1】：

clients 必须在您的 ClientCtrl 上定义。你能发布你的控制器吗？可能clients 不在您的 $scope 上或未正确初始化

编辑！

--> 最终解决方案是将doc.fromHTML($(..... 移动到$('a').click(function() { ... 中

【讨论】：

在$.get('/client') 的.sucess 函数中尝试$scope.clients = data.result; 而不是$scope.clients = data;
当这个实现时，现在get方法的结果在我的ng-repeat中是不可见的
好吧，我错了。所以$scope.clients = data; ng-repeat 有效，但{{client.phone}} 是空的，对吗？那么我首先会尝试模拟客户端：$scope.clients = [{phone: '123', adress: 'test', zip: '123'}]; - 如果这有效，那么您的服务器没有响应您期望的对象
嗯，它不是空的，而是未定义的。车把中的所有数据在 pdf 中列为未定义
是的，未定义意味着该属性不存在。也许您的服务器传递了像{{client.Phone}}这样的大写属性