Print RDLC Report without Print Preview using JavaScript in ASPNet

In this article I will explain how to print RDLC Report (ReportViewer) on Client Side without Print Preview window using JavaScript in ASP.Net, C# and VB.Net.

HTML Markup

The HTML Markup consists of a ScriptManager and a RDLC ReportViewer control along with an HTML Button for printing the RDLC Report.

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="450" Height = "250">

</rsweb:ReportViewer>

Namespaces

You will need to import the following namespaces.

using System.Data;

using Microsoft.Reporting.WebForms;

VB.Net

Imports System.Data

Imports Microsoft.Reporting.WebForms

Populating RDLC Report with data

Inside the Page Load event of the page, the Typed DataSet is filled some dummy records and then set as DataSource for the RDLC Report.

Note: For more information on populating RDLC Report using DataSet, please refer my article RDLC Report using DataSet in ASP.Net.

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

ReportViewer1.ProcessingMode = ProcessingMode.Local;

ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc");

Customers dsCustomers = GetData();

ReportDataSource datasource = new ReportDataSource("Customers", dsCustomers.Tables[0]);

ReportViewer1.LocalReport.DataSources.Clear();

ReportViewer1.LocalReport.DataSources.Add(datasource);

}

private Customers GetData()

{

using (Customers dsCustomers = new Customers())

{

DataTable dt = dsCustomers.Tables["DataTable1"];

dt.Rows.Add("ALFKI", "Maria", "Boise", "Germany");

dt.Rows.Add("ANATR", "Ana Trujillo", "México D.F.", "Mexico");

dt.Rows.Add("ANTON", "Antonio Moreno", "Montréal", "Mexico");

dt.Rows.Add("AROUT", "Thomas Hardy", "Mannheim", "Sweden");

dt.Rows.Add("BERGS", "Christina Berglund", "Luleå", "Sweden");

return dsCustomers;

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

ReportViewer1.ProcessingMode = ProcessingMode.Local

ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc")

Dim dsCustomers As Customers = GetData()

Dim datasource As New ReportDataSource("Customers", dsCustomers.Tables(0))

ReportViewer1.LocalReport.DataSources.Clear()

ReportViewer1.LocalReport.DataSources.Add(datasource)

End If

End Sub

Private Function GetData() As Customers

Using dsCustomers As New Customers()

Dim dt As DataTable = dsCustomers.Tables("DataTable1")

dt.Rows.Add("ALFKI", "Maria", "Boise", "Germany")

dt.Rows.Add("ANATR", "Ana Trujillo", "México D.F.", "Mexico")

dt.Rows.Add("ANTON", "Antonio Moreno", "Montréal", "Mexico")

dt.Rows.Add("AROUT", "Thomas Hardy", "Mannheim", "Sweden")

dt.Rows.Add("BERGS", "Christina Berglund", "Luleå", "Sweden")

Return dsCustomers

End Using

End Function

Print RDLC Report without Print Preview using JavaScript in ASP.Net

Printing RDLC Report on Client Side without Print Preview using JavaScript

The following JavaScript function is executed when the Print button is clicked. Inside this function, first the RDLC ReportViewer control is referenced. Now we need to look for the HTML DIV element within the RDLC ReportViewer which is used for displaying the RDLC Report.

Once the HTML DIV reference is found, the contents of the HTML DIV element are written to an IFRAME element and the contents of the IFRAME element are printed using JavaScript Print function without opening Print Preview window.

Note: To know more about printing HTML DIV using IFRAME element please refer my article, Print DIV content without opening new popup window using JavaScript.

function Print() {

var report = document.getElementById("<%=ReportViewer1.ClientID %>");

var div = report.getElementsByTagName("DIV");

var reportContents;

for (var i = 0; i < div.length; i++) {

if (div[i].id.indexOf("VisibleReportContent") != -1) {

reportContents = div[i].innerHTML;

break;

}

var frame1 = document.createElement('iframe');

frame1.name = "frame1";

frame1.style.position = "absolute";

frame1.style.top = "-1000000px";

document.body.appendChild(frame1);

var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;

frameDoc.document.open();

frameDoc.document.write('<html><head><title>RDLC Report</title>');

frameDoc.document.write('</head><body style = "font-family:arial;font-size:10pt;">');

frameDoc.document.write(reportContents);

frameDoc.document.write('</body></html>');

frameDoc.document.close();

setTimeout(function () {

window.frames["frame1"].focus();

window.frames["frame1"].print();

document.body.removeChild(frame1);

}, 500);

}