Running Crystal Reports in MVC 4 using PDF.js and PDF Viewer

• Download source (no EXE) - 11.3 MB
• Download source - 14.2 MB

Introduction

The basic purpose of this tip is to show Crystal reports in MVC 4 using razor, pdf.js and PDF viewer.

Background

This tip uses MVC 4 razor syntax, Crystal Reports, SAP business object DLLs, and pdf.js. PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5. PDF.js is community-driven and supported by Mozilla Labs. Its goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs. So, all rights are reserved with their respected creators. You can get details of pdf.js from https://github.com/mozilla/pdf.js.

Using the Code

All the code present in the source folder is very simple. Here are a few steps:

Step 1

I have two divs in index.cshtml page:

<div>
<button class="btn yellow" style="width: 253px;" id="RunReportBtn" onclick="RunReport()"> Run Reports
</button>
</div>
<div>
<div class="reportsDiv" id="reportsDiv">
</div
</div>

Step 2

Here is the Ajax GET method that can also be used to send parameters for Crystal reports.

After success, I refresh Div and change its source using “RefreshReport” action which returns partial view "_ReportsDisplay".

<script>
            function RunReport() {
                $.ajax({
                    url: '/Home/ShowReport',
                    type: 'GET',
                    success: function (response) {
                        //debugger;
                        if (response.result == "-2") {
                            alert('Error during display of report');
                        }
                        else {
                            $('#reportsDiv').load('Home/RefreshReport');
                        }
                    },
                    error: function (xhr, status, error) {
                        displayErrorMessage('Error during display of report');
                    }
                });
            }

</script>

Step 3

Please study the code in _ReportsDisplay.cshtml and ReportView.cshtml, it is simple HTML.

Step 4

This action returns pdf as inline content.

[HttpGet]
        public ActionResult ShowReport()
        {
            bool isValid = true;
            string jsonErrorCode = "0";
            string strReportName = "generic.rpt";
            string msg = "";
            string strFromDate = DateTime.Now.AddDays(-30).ToString("mm/dd/yyyy");
            string strToDate = DateTime.Now.ToString("mm/dd/yyyy");
            try
            {
                if (isValid)
                {
                    ReportDocument rd = new ReportDocument();
                    string strRptPath = System.Web.HttpContext.Current.Server.MapPath("~/") + "App_Data//" + strReportName;
                    var rptSource = GetStudents();
                    rd.Load(strRptPath);
                    if (rptSource != null && rptSource.GetType().ToString() != "System.String")
                        rd.SetDataSource(rptSource);
                    if (!string.IsNullOrEmpty(strFromDate))
                        rd.SetParameterValue("fromDate", strFromDate);
                    if (!string.IsNullOrEmpty(strToDate))
                        rd.SetParameterValue("toDate", strFromDate);
                    rd.ExportToHttpResponse(ExportFormatType.PortableDocFormat, 
                    System.Web.HttpContext.Current.Response, false, "crReport");
                }
                else
                {
                    Response.Write("<H2>Report not found</H2>");
                }
            }
            catch (Exception ex)
            {
                msg = ex.Message;
                jsonErrorCode = "-2";
            }

            return Json(new { result = jsonErrorCode, err = msg }, JsonRequestBehavior.AllowGet);
        }

        public ActionResult RefreshReport()
        {
            return PartialView("_ReportsDisplay");
        }
        private List<Student> GetStudents()
        {
            return new List<Student>() { 
            new Student(){StudentID=1,StudentName="Abid Hussain"},
            new Student(){StudentID=2,StudentName="Muhammad Ibraheem"}
            };
        }
    }        

Step 5

I have changed one line in viewer.js (contents/pdfjs1030/web/viewer.js):

var DEFAULT_URL = 'showreport';

Note

Contents of Pdfjs1030 folder are property of https://github.com/mozilla/pdf.js.