Print Crystal Report on Client Side on Button Click using JavaScript in ASPNet

In this article I will explain how to print Crystal Report on Client Side on Button Click using JavaScript in ASP.Net. This solution will work printing for Crystal Reports version 13 generated with Visual Studio 2010, 2012 and 2013 in ASP.Net.

HTML Markup

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

The Crystal ReportViewer control is placed inside an HTML DIV with an Id and this is very important step as this HTML DIV will be used for printing the Crystal Report on Client Side using JavaScript

<CR:CrystalReportViewer ID="CrystalReportViewer1" runat="server" AutoDataBind="true"

Height="400" Width="600" BestFitPage="False" />

</div>

<br />

Namespaces

You will need to import the following namespaces.

using System.Data;

using CrystalDecisions.CrystalReports.Engine;

Populating Crystal Report with data

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

Note: I am populating Crystal Report using DataSet, for more details please refer my article Crystal Report ASP.Net Example using DataSet or DataTable in C# VB.Net and Visual Studio 2010.

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

this.BindReport();

}

private void BindReport()

{

ReportDocument crystalReport = new ReportDocument();

crystalReport.Load(Server.MapPath("~/CustomerReport.rpt"));

Customers dsCustomers = GetData();

crystalReport.SetDataSource(dsCustomers);

CrystalReportViewer1.ReportSource = crystalReport;

CrystalReportViewer1.DisplayGroupTree = false;

}

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;

}

Print Crystal Report on Client Side on Button Click using JavaScript in ASP.Net

Printing Crystal Report on Client Side using JavaScript

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

Once the IFRAME reference is found, the contents of the IFRAME element are printed using the JavaScript Print function.

function Print() {

var dvReport = document.getElementById("dvReport");

var frame1 = dvReport.getElementsByTagName("iframe")[0];

if (navigator.appName.indexOf("Internet Explorer") != -1) {

frame1.name = frame1.id;

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

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

}

else {

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

frameDoc.print();

}

</script>