如何在angularjs中将html数据导出为pdf

一尘不染

如何在angularjs中将html数据导出为pdf

angularjs

这是我的html代码，我在其中渲染了文件中的所有json数据，.js但越来越

TypeError：无法将未定义或null转换为DocMeasure.measureNode（pdfmake.js：15635）的DocMeasure.measureNode（pdfmake.js：15635）的Function.keys（）上的对象.layoutDocument（pdfmake.js：15076）在PdfPrinter.createPdfKitDocument（pdfmake.js：2130）在Document._createDoc（pdfmake.js：82）在Document.getDataUrl（pdfmake.js：177）在Document.open（pdfmake.js）
：109）位于l。$ scope.openPdf（app.js：29）

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="pdfmake.js"></script>
  <script type="text/javascript" src="vfs_fonts.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="raj.js"></script>
    <script type="text/javascript" src="jspdf.js"></script>



</head>

<body ng-app="pdfDemo">
  <div ng-controller="pdfCtrl">
          <div id="pdfContent">
                  <table id="example-table">
                            <thead>
                            <th>firstName</th>
                            <th>lastName</th>
                            <th>Gender</th>
                            <th>Mobile</th>

                            </thead>
                            <tbody>
                            <tr ng-repeat="emp in employees">
                            <td>{{emp.firstName}}</td>
                            <td>{{emp.lastName}}</td>
                            <td>{{emp.gender}}</td>
                            <td>{{emp.mobile}}</td>
                            </tr>

                            </tbody>

                  </table>
          </div>
    <button ng-click="openPdf()">Open Pdf</button>
    <button ng-click="downloadPdf()">Download Pdf</button>
  </div>

</body>

</html>

阅读 287

2020-07-04

共1个答案

一尘不染

您可以使用pdfmake导出pdf

演示

var app = angular.module("app", []);



 app.controller("listController", ["$scope",

   function($scope) {

     $scope.data=  [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];



     $scope.export = function(){

        html2canvas(document.getElementById('exportthis'), {

            onrendered: function (canvas) {

                var data = canvas.toDataURL();

                var docDefinition = {

                    content: [{

                        image: data,

                        width: 500,

                    }]

                };

                pdfMake.createPdf(docDefinition).download("test.pdf");

            }

        });

     }

   }

 ]);


<!doctype html>

<html ng-app="app">



<head>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

  <script src="script.js"></script>

</head>



<body>

  <div ng-controller="listController">

    <div id="exportthis">

      {{data}}

    </div>

    <button ng-click="export()">export</button>

  </div>

</body>



</html>

2020-07-04