Html Reporting

Print Preview 

http://etimbo.github.io/jquery-print-preview-plugin/example/index.html

Example

report.cshtml file

    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
    <script src="~/assest/grid/Comman.js"></script>
    <script src="~/assest/grid/Reporting.js"></script>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="container" id="content">
    <h2 data-bind="text:Titile"></h2>
    <p data-bind="text:Date"> </p>
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody id="detailTableGrid">
         
        </tbody>
    </table>
    Total Amount <h3 data-bind="text:total"></h3>
</div>

<script type="text/x-kendo-template" id="booking-details">

                        # for(var key=0; key < data.e.Report.length; key++){#
                        <tr>
                            <td>
                                #= data.e.Report[key]["Id"] #
                            </td>
                            <td>
                                #= data.e.Report[key]["Name"] #
                            </td>
                            <td>
                                #= data.e.Report[key]["Address"] #
                            </td>
                            <td>
                                #= data.e.Report[key]["Payment"] #
                            </td>
                        </tr>

                        #}#

</script>

----------------------------------

Reporting.ts file

/// <reference path="comman.ts" />

module Reporting {

    $(function () {

        new serverCaller().callservice("/Reporting/GetReportInfo", null).done(function (e) {

            console.log(e);

            const template = kendo.template($('#booking-details').html());

            var data: any = {

                e: e

            };

            var xxx: any = {

                total: getTotal(data.e.Report),

                Titile: data.e.ReportHeader.Titile ,

                Date : data.e.ReportHeader.Date 

            };

            kendo.bind($("#content"), xxx);

            $('#detailTableGrid').html(template(data));

        });

        function getTotal(e): number {

            var total: number = 0;

            $.each(e, function (i, d) {

                total += Number(d["Payment"]);

            });

            return total;

        }

    });

  

    class serverCaller extends JTypeScipt.apiConnector { }

}

----------------------

Controller.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace XXXZX.Controllers
{
    public class ReportingController : Controller
    {
        // GET: Reporting
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetReportInfo() {

            return Json(new ReportRepo().GetReport(), JsonRequestBehavior.AllowGet);
        }
    }


    public class ReportRepo{


        public View GetReport() {

            Random rd = new Random();
            var x = new List<Report>();
            for (int i = 0; i < 5; i++)
            {
                x.Add(new Report {
                     Address = $"address {i}",
                     Id = i,
                     Name = $"name {i}",
                     Payment = rd.Next(100,500)
                });
            }

            return new View {
                Report = x,
                ReportHeader = new ReportHeader {
                    Date = DateTime.Today.ToShortDateString(),
                    Titile = "Simple Report",
                }
            };
        }

    }

    public class View {

        public ReportHeader ReportHeader { get; set; }
        public List<Report> Report { get; set;}
    }

    public class ReportHeader {

        public string Titile { get; set; }
        public string Date { get; set; }
    }

    public class Report {

        public int Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public int Payment { get; set; }
    }
}

---------------

Sample Json

{"ReportHeader":{"Titile":"Simple Report","Date":"6/29/2016"},"Report":[{"Id":0,"Name":"name 0","Address":"address 0","Payment":218},{"Id":1,"Name":"name 1","Address":"address 1","Payment":246},{"Id":2,"Name":"name 2","Address":"address 2","Payment":135},{"Id":3,"Name":"name 3","Address":"address 3","Payment":318},{"Id":4,"Name":"name 4","Address":"address 4","Payment":483}]}

Print Content

function printTicket() {
           var mywindow = window.open('', 'PRINT', 'height=400,width=600');
           mywindow.document.write('<html><head><title>' + document.title + '</title>');
 
           mywindow.document.write('</head><body>');
           mywindow.document.write($('#ticket-report').html());
           mywindow.document.write('</body></html>');
 
           mywindow.document.close(); // necessary for IE >= 10
           mywindow.focus(); // necessary for IE >= 10*/
 
           mywindow.print();
           mywindow.close();
           return true;
   }

Report Attachment as Email

nuget :
 HtmlRenderer.PdfSharp

[HttpGet]
      public FileResult GetTicketAttachmetPreview()
      {
          Byte[] res = null;
          using (MemoryStream ms = new MemoryStream())
          {
              var pdf = TheArtOfDev.HtmlRenderer.PdfSharp.PdfGenerator.

GeneratePdf($"<html>{TempData["content"]}</html>", PdfSharp.PageSize.A4);
              pdf.Save(ms);
              res = ms.ToArray();
          }
          return File(res, System.Net.Mime.MediaTypeNames.Application.Octet, 

Guid.NewGuid() + ".pdf");
      }