How to display report files in PDF Viewer

2 mins read

Essential JS 2 PDF Viewer

The Syncfusion PDF Viewer in ASP.NET Core (Essential JS 2) is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It is also available in other frameworks such as JavaScript, Angular, ASP.NET MVC and React.

Refer to the following UG link for getting started with the PdfViewerControl.

https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started/

Loading report file in PDF Viewer

You can load the report file in the PDF Viewer by converting it into PDF document using Syncfusion ReportWriter. The following UG link explains how to convert report file to PDF document.

https://help.syncfusion.com/aspnetmvc/reportwriter/export-types#exporting-report-as-pdf

The following steps explain how the report file is displaying in PDF Viewer:

Step 1

Clicking the Generate PDF button will call the Viewer() method in the HomeController.cs where the report to PDF conversion takes place and the base64string is returned to Viewer.cshtml

Index.cshtml

HTML

<button type="button" onclick="onClicked()">Generate PDF</button>

JavaScript

  function onClicked() 
{
     location.href = '@Url.Action("Viewer", "Home")';            
 }

Step 2

The following code converts report file to PDF document as base64string and returns the same to Viewer.cshtml

HomeController.cs

public ViewResult Viewer()
        {
            var _report_name = "GroupingAgg.rdl";
            var _report_path_name = @"\" + _report_name;
            var _server_root = ((IHostingEnvironment)HttpContext.RequestServices.GetService(typeof(IHostingEnvironment)));// EQ to .MapPath(_report_path_name);               
            string basePath = _server_root.WebRootPath;
            //Load the report file
            FileStream inputStream = new FileStream(basePath + _report_path_name, FileMode.Open, FileAccess.Read);                  
            using (var reportWriter = new ReportWriter(inputStream))
            {
                reportWriter.ReportProcessingMode = ProcessingMode.Remote;
                MemoryStream memoryStream = new MemoryStream();
                try
                {
                    //Creating PDF document
                    string base64String = string.Empty;
                    using (MemoryStream ms = new MemoryStream())
                    {
                        reportWriter.Save(ms, WriterFormat.PDF);
                        base64String = Convert.ToBase64String(ms.ToArray());
                    }
                    string base64 = String.Format("data:application/pdf;base64," + base64String);
                    //Assign base64string to ViewBag
                    ViewBag.Base64 = base64;
                    return View();
                }
                catch (Exception Ex)
                {
                    Console.WriteLine("Error Information:" + Ex);
                    return null;
                }
            }
        }

Step 3

ViewBag is used to get the base64string in Viewer.cshttml and that is assigned to the documentPath API of the PDF Viewer control. Finally, the PDF Viewer will be initialized with that document.

Viewer.cshtml

HTML

<div id="pdfViewer" style="height:750px"></div>

JavaScript

        var pdfviewer;
        var file = "@ViewBag.Base64";       
        if (pdfviewer) {
            //Load the document in PDF viewer
            pdfviewer.load(data, null);
        } else {
            // Render the PDF viewer control
            var viewer = new ej.pdfviewer.PdfViewer({
                //Sets the base64 string to the documentPath API
                documentPath: file,
                serviceUrl: '/api/PdfViewer',
            });
            ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation);
            viewer.appendTo('#pdfViewer');
            pdfviewer = document.getElementById("pdfViewer").ej2_instances[0];
        }

Sample link https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportSample_core_2.0655105035

Note:

In the above sample, while passing the base64string from controller to client, the format of the base64 string may be changed. Hence the modified string must be replaced with the correct character in the Load() of PdfViewerController.cs and loaded the document in PDF Viewer. For example, in the following code ‘+’ is replaced with “+”.

string base64 = (jsonObject["document"]).ToString();                
                    string converted = base64.Replace("&#x2B;", "+");                    
                    byte[] bytes = Convert.FromBase64String(converted);                 
                    stream = new MemoryStream(bytes);

Did you find this information helpful?

Yes