如何在angularjs中将html数据导出为pdf [英] how to export html data to pdf in angularjs
问题描述
这是我的html代码，我在其中渲染了.js文件中的所有json数据，但得到
this is my html code where i rendered all json data from .js file but getting
TypeError:无法将未定义或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)
TypeError: Cannot convert undefined or null to object at Function.keys () at DocMeasure.measureNode (pdfmake.js:15647) at DocMeasure.measureDocument (pdfmake.js:15635) at LayoutBuilder.tryLayoutDocument (pdfmake.js:15088) at LayoutBuilder.layoutDocument (pdfmake.js:15076) at PdfPrinter.createPdfKitDocument (pdfmake.js:2130) at Document._createDoc (pdfmake.js:82) at Document.getDataUrl (pdfmake.js:177) at Document.open (pdfmake.js:109) at 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>
推荐答案
您可以使用 pdfmake ，导出pdf
You can use pdfmake, to export the 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>
这篇关于如何在angularjs中将html数据导出为pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
