We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Create a pdf file from ReportViewer & show it in PdfViewer

Create a pdf file from ReportViewer & show it in PdfViewer

Hi,

I have a button click event that send a parameter ("OrderId") to the controller, in the controller I should create a pdf file from a report file (.rdl) using the paramater, and send it back to the view and show it in new window (PdfViewer).

What I want is to open order report in new window with a click button event, using ReportViewer and PdfViewer.
Can you help me to do this?
--------------------------------------------------------------------------------------------------------------------------------------------------
Controller:
               HttpContext httpContext = System.Web.HttpContext.Current;
                ReportWriter reportWriter = new ReportWriter();
                reportWriter.ReportPath = Server.MapPath("~/App_Data/Orders.rdl");
                reportWriter.ReportProcessingMode = Syncfusion.EJ.ReportWriter.ProcessingMode.Remote;
                List parameters = new List();
                parameters.Add(new ReportParameter() { Name = "OrderId", Labels = new List() { OrderId}, Values = new List() { OrderId} });

                reportWriter.SetParameters(parameters);
               Stream exportStream = new MemoryStream();
                reportWriter.Save(exportStream, WriterFormat.PDF);
                var _pdfStream = exportStream;
                _pdfStream.Position = 0;
----------------------------------------------------------------------------------------------------------------------------------------------
View:
 $.ajax({
            url: '@Url.Action("OpenOrderReport")',
            data: {
                OrderId: 1234
            },
            success: function (data) {
               window.open(data,  '_blank', 'fullscreen=yes, menubar=yes, resizable=yes, titlebar=yes, toolbar=yes');
        }
    });
--------------------------------------------------------------------------------------------------------------------------------------------------

Regards,
Anis

1 Reply
KK Karthik Krishnaraj Syncfusion Team November 14, 2018 12:31 PM UTC

Hi Anis, 
 
You can create PDF document from the Report(.rdl file ) (using Syncfusion Report Viewer) and show it in new window using PDF viewer. Refer to the following code, 
 
JavaScript 
 
<input type="button" value="Open Report in PDF viewer" onclick="loadPdf();" /> 
 
    function loadPdf() { 
        var jsonData = new Object(); 
        jsonData["Id"] = "abc"; 
        var jsonResult = JSON.stringify(jsonData); 
        $.ajax({             
            url: '@Url.Action("OpenOrderReport")', 
            type: 'POST', 
            dataType: 'json', 
            crossDomain: true, 
            traditional: true, 
            contentType: 'application/json; charset=utf-8', 
            data: jsonResult, 
            success: function (data) {                 
                var _filename = data["data"]; 
                var ws = window.open("", '_blank', "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no") 
                //Adding script and CSS files 
                ws.document.write('<!DOCTYPE html><html><head><title>PdfViewer</title><link rel='nofollow' href = "https://cdn.syncfusion.com/16.3.0.29/js/web/flat-azure/ej.web.all.min.css" rel = "stylesheet"><script src="https://cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"><\/script><script src="https://cdn.syncfusion.com/16.3.0.29/js/web/ej.web.all.min.js"><\/script><\/head><body>'); 
                //div to render PDF Viewer 
                ws.document.write('<div style="width:100%;min-height:570px"><div id="container"><\/div><\/div>') 
                //Initializes the PDF Viewer 
                ws.document.write("<script>$(function(){ $('#container').ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentPath: '" + _filename + "', })})<\/script>") 
                ws.document.write('<\/body><\/html>'); 
                ws.document.close(); 
            }, 
            error: function (msg, textStatus, errorThrown) { 
                alert('Exception' + msg.responseText); 
            } 
        }); 
    } 
 
C# 
 
public object OpenOrderReport(ReportId jsonResult) 
        { 
            var id = jsonResult.Id;           
            ReportWriter reportWriter = new ReportWriter(); 
            reportWriter.ReportPath = Server.MapPath("~/Data/GroupingAgg.rdl"); 
            reportWriter.ReportProcessingMode = ProcessingMode.Remote; 
            List<ReportParameter> parameters = new List<ReportParameter>(); 
            parameters.Add(new ReportParameter() { Name = "OrderId", Labels = new List<string>() { id }, Values = new List<string>() { id } }); 
            reportWriter.SetParameters(parameters); 
            var format = WriterFormat.PDF;            
            MemoryStream ms = new MemoryStream(); 
            //To save the report as memory stream 
            reportWriter.Save(ms, format); 
            //Converts Memory stream into base64 string 
            string base64 = "data:application/pdf;base64," + Convert.ToBase64String(ms.ToArray()); 
            var json = new { data = base64 }; 
            return Json(json); 
        } 
 
Sample  
 
 
Clicking on the ‘Open Report in PDF viewer’ in the above sample will send the OrderId as parameter to the controller, where the PDF document is created from the report file(.rdl) and sent back the PDF document stream as base64 string to the view for rendering in PDF viewer. 
 
Regards, 
Karthik. 


Loader.
Live Chat Icon For mobile
Up arrow icon