Check the below example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
white-space: nowrap;
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Customers = [
{ Id: 1, Name: "Davolio", Title: "Sales Representative", TitleOfCourtesy: "Ms.", BirthDate: "1948-12-08", HireDate: "1992-05-01", Address: "507 - 20th Ave. E.Apt. 2A", City: "Seattle", Region: "WA", PostalCode: "98122", Country: "USA", HomePhone: "(206) 555-9857", Extension: "5467", Notes: "Education includes a BA in psychology from Colorado State University in 1970. She also completed 'The Art of the Cold Call.' Nancy is a member of Toastmasters International." },
{ Id: 2, Name: "Fuller", Title: "Vice President, Sales", TitleOfCourtesy: "Dr.", BirthDate: "1952-02-19", HireDate: "1992-08-14", Address: "908 W. Capital Way", City: "Tacoma", Region: "WA", PostalCode: "98401", Country: "USA", HomePhone: "(206) 555-9482", Extension: "3457", Notes: "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association." },
{ Id: 3, Name: "Leverling", Title: "Sales Representative", TitleOfCourtesy: "Ms.", BirthDate: "1963-08-30", HireDate: "1992-04-01", Address: "722 Moss Bay Blvd.", City: "Kirkland", Region: "WA", PostalCode: "98033", Country: "USA", HomePhone: "(206) 555-3412", Extension: "3355", Notes: "Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992." },
{ Id: 4, Name: "Peacock", Title: "Sales Representative", TitleOfCourtesy: "Mrs.", BirthDate: "1937-09-19", HireDate: "1993-05-03", Address: "4110 Old Redmond Rd.", City: "Redmond", Region: "WA", PostalCode: "98052", Country: "USA", HomePhone: "(206) 555-8122", Extension: "5176", Notes: "Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992." }
];
$scope.Export = function () {
html2canvas(document.getElementById('tblCustomers'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("Table.pdf");
}
});
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table id="tblCustomers" cellpadding="0" cellspacing="0">
<tr>
<th>Id</th>
<th>Name</th>
<th>Title</th>
<th>Title Of Courtesy</th>
<th>Birth Date</th>
<th>Hire Date</th>
<th>Address</th>
<th>City</th>
<th>Region</th>
<th>Postal Code</th>
<th>Country</th>
<th>Home Phone</th>
<th>Extension</th>
<th>Notes</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Id}}</td>
<td>{{m.Name}}</td>
<td>{{m.Title}}</td>
<td>{{m.TitleOfCourtesy}}</td>
<td>{{m.BirthDate}}</td>
<td>{{m.HireDate}}</td>
<td>{{m.Address}}</td>
<td>{{m.City}}</td>
<td>{{m.Region}}</td>
<td>{{m.PostalCode}}</td>
<td>{{m.Country}}</td>
<td>{{m.HomePhone}}</td>
<td>{{m.Extension}}</td>
<td>{{m.Notes}}</td>
</tr>
</tbody>
</table>
<br />
<input type="button" value="Export" ng-click="Export()" />
</div>
</body>
</html>
