Print dynamic DIV contents using AngularJS in ASP.Net MVC

Last Reply 12 days ago By dharmendr

Posted 14 days ago

Hi,

based upon below url i am going to display filter (input) values on pdf

Display record on HTML Table based upon dynamic control values using AngularJS in ASP.Net MVC

I have updated my code

like below

at screen input values are displaying properly

https://ibb.co/yfhwb0t

ater clciking of Export pdf  button it was not displaying properly

https://ibb.co/7YYc4RQ  

<a href="#" class="btn btn-danger btn-sm"  ng-click="printToCart('dvContainer1')"  >Export PDF</a>

 

//Print screen by Id
$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  /></head><body onload="window.print()">' + innerContents + '</html>');
    popupWinindow.document.close();
}

 

      <div ng-show="dvContainer1" id="dvContainer1">
          <div class="col-xs-6" style="padding-left: 400px;width: 70%;padding-top: 20px;">
              <div class="invoice-number-container">
                  <label for="invoice-number" class="form-control">Compnay Name: </label>
                  XXXXXXXXXXXXXXXXX
              </div>
              <div class="invoice-number-container">
                  <label for="invoice-number" class="form-control">Location Name:</label>
                  XXXXXXXXXXXXXXXXXXXXXXXXXX
              </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>
          <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>

 

Posted 12 days ago

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