locked
How to generate the output value s pdf/Excel in MVC with angular js RRS feed

  • Question

  • User689180510 posted

    Hi,

    I need to generate the output value as PDF or excel as per the end user choice.

    Which is the best choice to generate. To handle in MVC or AngularJS

    Coding : 

    AngularJS:

    $scope.ReportGenerate = function () {
    TransactionReportData();
    }

    function TransactionReportData() {

    var ReportData = {
    Customername: $scope.SelectedCustomer.Identifier,
    Transactionid: $scope.Transactionid,
    StartDate: $('#StartDate').val() + " 00:00:00",
    EndDate: $('#EndDate').val() + " 23:59:59",
    OrderID: OdrID
    };

    var result = TransactionSearchService.GenerateReport(ReportData);

    result.then(function (response) {
    $scope.RPTData = response.data;

    if ($scope.RPTData.ErrorInfo == null) {
    $scope.ReportGenerateFormat = $scope.RPTData.ReportTransactions; // I need  this value should be generate as PDF and excel and output format display as array(list)

    }
    else {
    $scope.ErrorMessage += $scope.RPTData.ErrorInfo.Code;
    $scope.ErrorMessage += " : ";
    $scope.ErrorMessage += $scope.RPTData.ErrorInfo.Description;
    }
    });
    };

    Controller :

    public ActionResult GenerateReport(string data)
    {
    DataContractJsonSerializer jsonObjectPersonInfo = new DataContractJsonSerializer(typeof(Transsearchdata));
    MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(data));
    Transsearchdata Search = (Transsearchdata)jsonObjectPersonInfo.ReadObject(stream);
    Transactionsearch TransSearchData = new Transactionsearch();
    TransactionReportResponse response = TransSearchData.ReportData(Search, "en");
    return Json(response, JsonRequestBehavior.AllowGet);

    }

    How to do achieve this in MVC with angularjs. 

    It would be great if someone support. 

    Monday, December 24, 2018 12:22 PM

Answers

  • User1520731567 posted

    Hi jafferpg,

    According to your code:

    var result = TransactionSearchService.GenerateReport(ReportData);

    Is this line going to get data in the background?How does this work?

    if ($scope.RPTData.ErrorInfo == null) {
    $scope.ReportGenerateFormat = $scope.RPTData.ReportTransactions; // I need  this value should be generate as PDF and excel and output format display as array(list)

    }

    And I also can not understand clearly about above code.

    So, I make a demo about how to generate  pdf/Excel in MVC with angular js,this demo will use some other plugins,such as: html2canvas,pdfmake,FileSaver.

    please refer to it:

    Controller:

     public partial class ExportExcel_Employee
            {
                public int Id { get; set; }
                public string Name { get; set; }
                public Nullable<int> Phone { get; set; }
                public Nullable<int> Salary { get; set; }
                public string Department { get; set; }
                public string ImagePath { get; set; }
                public string EmailId { get; set; }
            }
    
            public ActionResult ExportExcel()
            {
                return View();
            }
    
            public JsonResult GetEmployee()
            {
                List<ExportExcel_Employee> model = new List<ExportExcel_Employee>();
                model.Add(new ExportExcel_Employee { Id=1,Name="aa",Phone=123123,Salary=100,Department="de1"});
                model.Add(new ExportExcel_Employee { Id = 1, Name = "bb", Phone = 123124, Salary = 200, Department = "de2" });
                model.Add(new ExportExcel_Employee { Id = 1, Name = "cc", Phone = 123125, Salary = 300, Department = "de3" });
    
                return Json(model, JsonRequestBehavior.AllowGet);
            }

    View:

    @{
        ViewBag.Title = "ExportExcel";
    }
    
    
    <style>
    </style>
    <div ng-app="mvcapp" ng-controller="DemoController">
        <input type="button" value="Export to Excel" ng-click="exportData()" />
        <input type="button" value="Export to PDF" ng-click="exportData2()" />
    
        <div id="export">
            <table>
                <tr>
                    <th>S.No</th>
    
                    <th>
                        Name
                    </th>
                    <th>
                        Phone
                    </th>
                    <th>
                        Department
                    </th>
                    <th>
                        Salary
                    </th>
                    <th>
                        Email
                    </th>
                </tr>
                <tr ng-repeat="empModel in employees">
                    <td>{{empModel.Id}}</td>
                    <td>{{empModel.Name }}</td>
                    <td>{{empModel.Phone }}</td>
                    <td>{{empModel.Department}}</td>
                    <td>{{empModel.Salary }}</td>
                    <td>{{empModel.EmailId ||'Email not available'}}</td>
                </tr>
            </table>
        </div>
    </div>
    
    <style>
        input[type=button][disabled=disabled] {
            opacity: 0.65;
            cursor: not-allowed;
        }
    
        table tr th {
            padding: 10px 30px;
        }
    
        table tr td {
            padding: 10px 30px;
        }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script>
        var angular = angular.module('mvcapp', []);
    
        angular.controller('DemoController', function ($scope, $http) {
    
            GetAllData();
            $scope.isDisabledupdate = true;
            //Get All Employee
            function GetAllData() {
                $http.get('/Home2/GetEmployee').success(function (data) {
                    $scope.employees = data;
                });
            };
            $scope.exportData = function () {
                var blob = new Blob([document.getElementById('export').innerHTML], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                });
                saveAs(blob, "Employeereport.xls");
            };
    
            $scope.exportData2 = function () {
                html2canvas(document.getElementById('export'), {
                    onrendered: function (canvas) {
                        var data = canvas.toDataURL();
                        var docDefinition = {
                            content: [{
                                image: data,
                                width: 500,
                            }]
                        };
                        pdfMake.createPdf(docDefinition).download("test.pdf");
                    }
                });
            };
    
    
        });
    </script>
    

    How it works:

    Hope my answer will helpful to you.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 25, 2018 7:09 AM
  • User689180510 posted

    Thanks Yuki for your response. Your input is too valuable

    Done from server side by using Itextsharp pdf.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 27, 2018 10:56 AM

All replies

  • User1520731567 posted

    Hi jafferpg,

    According to your code:

    var result = TransactionSearchService.GenerateReport(ReportData);

    Is this line going to get data in the background?How does this work?

    if ($scope.RPTData.ErrorInfo == null) {
    $scope.ReportGenerateFormat = $scope.RPTData.ReportTransactions; // I need  this value should be generate as PDF and excel and output format display as array(list)

    }

    And I also can not understand clearly about above code.

    So, I make a demo about how to generate  pdf/Excel in MVC with angular js,this demo will use some other plugins,such as: html2canvas,pdfmake,FileSaver.

    please refer to it:

    Controller:

     public partial class ExportExcel_Employee
            {
                public int Id { get; set; }
                public string Name { get; set; }
                public Nullable<int> Phone { get; set; }
                public Nullable<int> Salary { get; set; }
                public string Department { get; set; }
                public string ImagePath { get; set; }
                public string EmailId { get; set; }
            }
    
            public ActionResult ExportExcel()
            {
                return View();
            }
    
            public JsonResult GetEmployee()
            {
                List<ExportExcel_Employee> model = new List<ExportExcel_Employee>();
                model.Add(new ExportExcel_Employee { Id=1,Name="aa",Phone=123123,Salary=100,Department="de1"});
                model.Add(new ExportExcel_Employee { Id = 1, Name = "bb", Phone = 123124, Salary = 200, Department = "de2" });
                model.Add(new ExportExcel_Employee { Id = 1, Name = "cc", Phone = 123125, Salary = 300, Department = "de3" });
    
                return Json(model, JsonRequestBehavior.AllowGet);
            }

    View:

    @{
        ViewBag.Title = "ExportExcel";
    }
    
    
    <style>
    </style>
    <div ng-app="mvcapp" ng-controller="DemoController">
        <input type="button" value="Export to Excel" ng-click="exportData()" />
        <input type="button" value="Export to PDF" ng-click="exportData2()" />
    
        <div id="export">
            <table>
                <tr>
                    <th>S.No</th>
    
                    <th>
                        Name
                    </th>
                    <th>
                        Phone
                    </th>
                    <th>
                        Department
                    </th>
                    <th>
                        Salary
                    </th>
                    <th>
                        Email
                    </th>
                </tr>
                <tr ng-repeat="empModel in employees">
                    <td>{{empModel.Id}}</td>
                    <td>{{empModel.Name }}</td>
                    <td>{{empModel.Phone }}</td>
                    <td>{{empModel.Department}}</td>
                    <td>{{empModel.Salary }}</td>
                    <td>{{empModel.EmailId ||'Email not available'}}</td>
                </tr>
            </table>
        </div>
    </div>
    
    <style>
        input[type=button][disabled=disabled] {
            opacity: 0.65;
            cursor: not-allowed;
        }
    
        table tr th {
            padding: 10px 30px;
        }
    
        table tr td {
            padding: 10px 30px;
        }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script>
        var angular = angular.module('mvcapp', []);
    
        angular.controller('DemoController', function ($scope, $http) {
    
            GetAllData();
            $scope.isDisabledupdate = true;
            //Get All Employee
            function GetAllData() {
                $http.get('/Home2/GetEmployee').success(function (data) {
                    $scope.employees = data;
                });
            };
            $scope.exportData = function () {
                var blob = new Blob([document.getElementById('export').innerHTML], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                });
                saveAs(blob, "Employeereport.xls");
            };
    
            $scope.exportData2 = function () {
                html2canvas(document.getElementById('export'), {
                    onrendered: function (canvas) {
                        var data = canvas.toDataURL();
                        var docDefinition = {
                            content: [{
                                image: data,
                                width: 500,
                            }]
                        };
                        pdfMake.createPdf(docDefinition).download("test.pdf");
                    }
                });
            };
    
    
        });
    </script>
    

    How it works:

    Hope my answer will helpful to you.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 25, 2018 7:09 AM
  • User689180510 posted

    Thanks Yuki for your response. Your input is too valuable

    Done from server side by using Itextsharp pdf.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 27, 2018 10:56 AM