Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
pdf.css
@media print
{
.ng-hide
{
display: none !important;
}
}
View
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
$scope.items = [
{ CType: 'dropdown', ma1: 'Employee', ma: 'Mahesh Ready' },
{ CType: 'datepicker', ma3: 'From', Date: '04-06-2019' },
{ CType: 'datepicker', ma3: 'To', Date: '03-06-2019' }
];
$scope.Employees = [
{ EmpName: 'Mahesh Ready', FatherName: 'Narayana', DOB: '12/07/1995', DOJ: '02/01/2018', Amt: '19350' }
];
$scope.printToCart = function (dvContainer1) {
var innerContents = document.getElementById(dvContainer1).innerHTML;
var popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href=/Content/pdf.css?662019 /></head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}
} ]);
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div id="dvContainer1">
<div style="padding-left: 30px; width: 70%; padding-top: 20px;">
<div class="invoice-number-container">
<label for="invoice-number" class="form-control">Compnay Name:</label>
Test Company
</div>
<div class="invoice-number-container">
<label for="invoice-number" class="form-control">Location Name:</label>
Mumbai
</div>
Filter Records b/w Textboxes :
<div ng-repeat="report in items" class="invoice-number-container">
<div style="float: left">
<span style="display: inline" ng-show="report.CType.toLowerCase()=='dropdown'">{{report.ma1}}={{report.ma}},</span>
<span style="display: inline" ng-show="report.CType.toLowerCase()=='datepicker'">{{report.ma3}}={{report.Date | date:"dd-MM-yyyy"}},</span>
</div>
</div>
</div>
<br />
<div>
<div class="table-responsive ">
<table border="0" cellspacing="0" cellpadding="0" ng-show="(Employees).length>0"
id="dvData" class="table table-bordered table-hover table-striped" style="margin-left: 20px;
margin-right: 20px;">
<thead>
<tr class="success">
<th ng-repeat="(header, value) in Employees[0]">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in Employees">
<td ng-repeat="cell in row">{{cell}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br />
<a href="#" class="btn btn-danger btn-sm" ng-click="printToCart('dvContainer1')">Export PDF</a>
</body>
</html>
Screenshots
The Print Preview
Exported Pdf
