如何在angularjs中将html数据导出为pdf [英] how to export html data to pdf in angularjs
本文介绍了如何在angularjs中将html数据导出为pdf的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的 html 代码，我在其中渲染了 .js 文件中的所有 json 数据，但得到了
TypeError: 无法将 undefined 或 null 转换为对象在 Function.keys ()在 DocMeasure.measureNode (pdfmake.js:15647)在 DocMeasure.measureDocument (pdfmake.js:15635)在 LayoutBuilder.tryLayoutDocument (pdfmake.js:15088)在 LayoutBuilder.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)
<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><body ng-app="pdfDemo"><div ng-controller="pdfCtrl"><div id="pdfContent"><table id="example-table"><头><th>firstName</th><th>lastName</th><th>性别</th><th>移动</th></thead><tr ng-repeat="emp in员工"><td>{{emp.firstName}}</td><td>{{emp.lastName}}</td><td>{{emp.gender}}</td><td>{{emp.mobile}}</td></tr></tbody><button ng-click="openPdf()">打开PDF</button><button ng-click="downloadPdf()">下载PDF</button>
</html>
解决方案 您可以使用 pdfmake, 导出pdf
演示
var app = angular.module("app", []);app.controller("listController", ["$scope",功能($范围){$scope.data= [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];$scope.export = function(){html2canvas(document.getElementById('exportthis'), {onrendered:函数(画布){var data = canvas.toDataURL();var docDefinition = {内容: [{图像:数据，宽度:500，}]};pdfMake.createPdf(docDefinition).download("test.pdf");}});}}]);
<html ng-app="app"><头><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><身体><div ng-controller="listController"><div id="exportthis">{{数据}}
<button ng-click="export()">export</button>
