ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Print dynamic DIV contents using AngularJS in ASP.Net MVC<p>Hi&nbsp;mahesh213,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: /Home/ public ActionResult Index() { return View(); } }</pre> <p><strong><span style="text-decoration: underline;">pdf.css</span></strong></p> <pre class="brush: css">@media print { .ng-hide { display: none !important; } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;html&gt; &lt;head&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []) app.controller(&#34;MyController&#34;, [&#39;$scope&#39;, &#39;$http&#39;, function ($scope, $http) { $scope.items = [ { CType: &#39;dropdown&#39;, ma1: &#39;Employee&#39;, ma: &#39;Mahesh Ready&#39; }, { CType: &#39;datepicker&#39;, ma3: &#39;From&#39;, Date: &#39;04-06-2019&#39; }, { CType: &#39;datepicker&#39;, ma3: &#39;To&#39;, Date: &#39;03-06-2019&#39; } ]; $scope.Employees = [ { EmpName: &#39;Mahesh Ready&#39;, FatherName: &#39;Narayana&#39;, DOB: &#39;12/07/1995&#39;, DOJ: &#39;02/01/2018&#39;, Amt: &#39;19350&#39; } ]; $scope.printToCart = function (dvContainer1) { var innerContents = document.getElementById(dvContainer1).innerHTML; var popupWinindow = window.open(&#39;&#39;, &#39;_blank&#39;, &#39;width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no&#39;); popupWinindow.document.open(); popupWinindow.document.write(&#39;&lt;html&gt;&lt;head&gt;&lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=/Content/pdf.css?662019 /&gt;&lt;/head&gt;&lt;body onload=&#34;window.print()&#34;&gt;&#39; + innerContents + &#39;&lt;/html&gt;&#39;); popupWinindow.document.close(); } } ]); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div id=&#34;dvContainer1&#34;&gt; &lt;div style=&#34;padding-left: 30px; width: 70%; padding-top: 20px;&#34;&gt; &lt;div class=&#34;invoice-number-container&#34;&gt; &lt;label for=&#34;invoice-number&#34; class=&#34;form-control&#34;&gt;Compnay Name:&lt;/label&gt; Test Company &lt;/div&gt; &lt;div class=&#34;invoice-number-container&#34;&gt; &lt;label for=&#34;invoice-number&#34; class=&#34;form-control&#34;&gt;Location Name:&lt;/label&gt; Mumbai &lt;/div&gt; Filter Records b/w Textboxes : &lt;div ng-repeat=&#34;report in items&#34; class=&#34;invoice-number-container&#34;&gt; &lt;div style=&#34;float: left&#34;&gt; &lt;span style=&#34;display: inline&#34; ng-show=&#34;report.CType.toLowerCase()==&#39;dropdown&#39;&#34;&gt;{{report.ma1}}={{report.ma}},&lt;/span&gt; &lt;span style=&#34;display: inline&#34; ng-show=&#34;report.CType.toLowerCase()==&#39;datepicker&#39;&#34;&gt;{{report.ma3}}={{report.Date | date:&#34;dd-MM-yyyy&#34;}},&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;div&gt; &lt;div class=&#34;table-responsive &#34;&gt; &lt;table border=&#34;0&#34; cellspacing=&#34;0&#34; cellpadding=&#34;0&#34; ng-show=&#34;(Employees).length&gt;0&#34; id=&#34;dvData&#34; class=&#34;table table-bordered table-hover table-striped&#34; style=&#34;margin-left: 20px; margin-right: 20px;&#34;&gt; &lt;thead&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th ng-repeat=&#34;(header, value) in Employees[0]&#34;&gt;{{header}}&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&#34;row in Employees&#34;&gt; &lt;td ng-repeat=&#34;cell in row&#34;&gt;{{cell}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;a href=&#34;#&#34; class=&#34;btn btn-danger btn-sm&#34; ng-click=&#34;printToCart(&#39;dvContainer1&#39;)&#34;&gt;Export PDF&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshots</span></strong></p> <p><strong>The Print Preview</strong></p> <p><strong><img src="https://i.imgur.com/B4KaPxq.jpg" alt="" width="472" height="166" /></strong></p> <p><strong>Exported Pdf</strong></p> <p><strong><img src="https://i.imgur.com/jLCqDHj.jpg" alt="" width="472" height="248" /></strong></p>https://www.aspforums.net:443/Threads/284744/Print-dynamic-DIV-contents-using-AngularJS-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/284744/Print-dynamic-DIV-contents-using-AngularJS-in-ASPNet-MVC/Thu, 06 Jun 2019 01:07:14 GMT