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.Export DIV content to Excel using JavaScript in AngularJS<p>Hi&nbsp;<a class="username" rel="mahesh213">mahesh213,</a></p> <p>Refer below code.</p> <p><strong><span style="text-decoration: underline;">HTML</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://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&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;}]; } ]); function fnExcelReport() { var tab_text = &#39;&lt;html xmlns:x=&#34;urn:schemas-microsoft-com:office:excel&#34;&gt;&#39;; tab_text = tab_text + &#39;&lt;head&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;&lt;x:ExcelWorksheet&gt;&#39;; tab_text = tab_text + &#39;&lt;x:Name&gt;Test Sheet&lt;/x:Name&gt;&#39;; tab_text = tab_text + &#39;&lt;x:WorksheetOptions&gt;&lt;x:Panes&gt;&lt;/x:Panes&gt;&lt;/x:WorksheetOptions&gt;&lt;/x:ExcelWorksheet&gt;&#39;; tab_text = tab_text + &#39;&lt;/x:ExcelWorksheets&gt;&lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;/head&gt;&lt;body&gt;&#39;; tab_text = tab_text + &#34;&lt;table border=&#39;1px&#39;&gt;&#34;; // Remove Dynamic hidden controls. var list = $(&#39;#dvContainer1&#39;).find(&#39;.ng-hide&#39;); for (var i = list.length - 1; 0 &lt;= i; i--) { if (list[i] &amp;&amp; list[i].parentElement) { list[i].parentElement.removeChild(list[i]); } } // Getting dynamic controll values. var list = $(&#39;#dvContainer1&#39;).find(&#39;.dvItems&#39;); var values = &#34;&#34;; for (var i = 0; i &lt;= list.length - 1; i++) { if (list[i] &amp;&amp; list[i].parentElement) { values += $(list[i]).text().trim(); } } for (var i = 0; i &lt;= list.length - 1; i++) { if (i == 0) { // Replace last comma and assign value. $($(&#39;#dvContainer1&#39;).find(&#39;.dvItems&#39;)[i]).text(values.replace(/,\s*$/, &#34;&#34;)); } else { $($(&#39;#dvContainer1&#39;).find(&#39;.dvItems&#39;)[i]).text(&#34;&#34;); } } tab_text = tab_text + $(&#39;#dvContainer1&#39;).html(); tab_text = tab_text + &#39;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;&#39;; var data_type = &#39;data:application/vnd.ms-excel&#39;; var ua = window.navigator.userAgent; var msie = ua.indexOf(&#34;MSIE &#34;); if (msie &gt; 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { if (window.navigator.msSaveBlob) { var blob = new Blob([tab_text], { type: &#34;application/vnd.ms-excel;charset=utf-8;&#34; }); navigator.msSaveBlob(blob, &#39;Coupon.xls&#39;); } } else { window.open(&#39;data:application/vnd.ms-excel,&#39; + encodeURIComponent(tab_text)); } } &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 dvItems&#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; onclick=&#34;fnExcelReport();&#34;&gt;Export PDF&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><span style="text-decoration: underline;">Exported Excel</span></p> <p><img src="https://i.imgur.com/zQyuQ4p.jpg" alt="" width="447" height="286" /></p>https://www.aspforums.net:443/Threads/178263/Export-DIV-content-to-Excel-using-JavaScript-in-AngularJS/https://www.aspforums.net:443/Threads/178263/Export-DIV-content-to-Excel-using-JavaScript-in-AngularJS/Mon, 10 Jun 2019 07:55:07 GMT