Category / Section
How to export report independently from JavaScript Report Viewer?
8 mins read
Syncfusion JavaScript ReportViewer exports the report independently to provide responsiveness to a user in the ReportViewer and avoid waiting for long time while exporting the report with large amount of data. The following steps guide you to export the report to Excel format independently using the ReportViewer exportItemClick event:
- Create a simple ReportViewer application with the help of getting started documentation.
- Initialize the exportItemClick action in the client-side viewer HTML file as shown in following example.
JavaScript
$(function () {
$("#container").ejReportViewer({
reportServiceUrl: '/api/ReportApi',
processingMode: ej.ReportViewer.ProcessingMode.Remote,
reportPath: '~/App_Data/BarCharts.rdl',
exportItemClick: 'onExportItemClick',
exportSettings: {excelFormat: ej.ReportViewer.ExcelFormats.Excel2013 },
});
});
- To export the report independently, you should implement WebAPI methods and override the default export click action of the ReportViewer.
- Create an onExportItemClick function in client-side and set the cancel property to true to override the default ReportViewer export.
- Create a JSON with ExportType, ReportPath, and other required custom properties. Here, in the code, few properties are used. You can pass any required properties to WebAPI.
- Post the Ajax request to the server using the Ajax post to the ExportReport API method.
- Write the Ajax functions to handle the success and failure result.
- You can replace the following code in the onExportItemClick method.
JavaScript
function onExportItemClick(args) {
if (args.value == "Excel") {
args.cancel = true;
if (isExporting) {
alert('Export is in progress for previous action');
return;
}
var proxy = $('#container').data('ejReportViewer');
var requrl = proxy.model.reportServiceUrl + '/ExportReport';
var _json = {
exportType: "Excel_excel2013",
userParameters: [{ name: 'userID1', value: 'Values1'},{ name: 'userID2', value: 'Values2' }],
reportPath: proxy.model.reportPath
};
isExporting = true;
$.ajax({
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
url: requrl,
data: JSON.stringify(_json),
crossDomain: true,
success: function (data) {
if (data) {
exportStart(data);
alert('Exported file download started for report ' + data);
isExporting = false;
}
},
error: function (data) {
isExporting = false;
alert('Failed to export the report');
}
})
}
}
- You can add the customized message to the Ajax error to show the error.
JavaScript
error: function (data) {
alert("Export process failed due to error");
}
- Create a new method ExportReport in the WebAPI controller with dictionary collection arguments.
- In the ExportReport WebAPI method, get the properties from the jsonResult dictionary and save values to the local property to export the report with available argument details.
- Initialize the ReportWriter instance and assign the properties like report path, parameters, data source credentials as required.
- Save the report to App_Data folder, the following complete code can be used to your application.
C#
public string ExportReport(Dictionary<string, object> jsonResult)
{
HttpContext currentContext = HttpContext.Current;
string path = HttpContext.Current.Server.MapPath("~/App_Data/");
int fileCount = Directory.GetFiles(path).Length;
string fileName = "Report" + fileCount + ".xlsx";
if (jsonResult.ContainsKey("userParameters"))
{
//Get client side user parameters and store in local variable. Here parameter values are sent.
DefaultParameter = jsonResult["userParameters"].ToString();
}
System.Threading.Thread thread = new System.Threading.Thread(delegate ()
{
ReportWriter reportWriter = new ReportWriter();
reportWriter.ReportPath = currentContext.Server.MapPath(jsonResult["reportPath"].ToString());
reportWriter.ReportProcessingMode = Syncfusion.EJ.ReportWriter.ProcessingMode.Remote;
//Set the parameter for report writer
if (DefaultParameter != null)
{
//reportWriter.SetParameters(JsonConvert.DeserializeObject<List<Syncfusion.Reports.EJ.ReportParameter>>(DefaultParameter));
}
using (var fileStream = File.Create(path + fileName))
{
reportWriter.Save(fileStream, WriterFormat.Excel);
}
});
thread.SetApartmentState(System.Threading.ApartmentState.STA);
thread.Start();
thread.Join();
return fileName;
}
- Add the implementation to exportStart function and create a form post for ExportStart WebAPI URL.
- Submit the form action to pass the report name to server for downloading the report. When the Ajax request succeeds, the exported document will be downloaded.
- Replace the following code block to the exportStart method.
JavaScript
function exportStart(jsonData) {
var requrl = '/api/ReportApi/ExportStart';
var form = $('<form>').attr({ 'action': requrl, 'method': 'POST', 'name': 'export', 'data-ajax': 'false' });
$('<input type=\'hidden\' title=\'params\'>').attr({
'id': this._id + '_' + "fileId",
'name': "fileId",
'value': jsonData,
}).appendTo(form);
$('body').append(form);
$(form).hide();
$(form).submit().remove();
}
- Implement the ExportStart WebAPI method in the server and create a System.Web.HttpResponse, and then add the content-disposition and content-type headers to the HttpResponse headers.
- Access the exported file from App_Data and update the generated Excel file to the output stream.
- Set the HttpResponseMessage success code and return the created System.Web.HttpResponse response.
- Replace the following code to the ExportStart WebAPI method.
C#
public object ExportStart()
{
string fileId = null;
if (HttpContext.Current.Request.Form != null &&
!string.IsNullOrEmpty(HttpContext.Current.Request.Form["fileId"]))
{
fileId = HttpContext.Current.Request.Form["fileId"];
}
System.Net.Http.HttpResponseMessage response = new System.Net.Http.HttpResponseMessage();
try
{
string path = HttpContext.Current.Server.MapPath("~/App_Data/");
var stream = File.Open(path + fileId, FileMode.Open);
stream.Position = 0;
System.Web.HttpResponse httpResponse = System.Web.HttpContext.Current.Response;
httpResponse.ClearContent();
httpResponse.Expires = 0;
httpResponse.Buffer = true;
httpResponse.AddHeader("Content-Disposition", "attachment;filename=\"" + fileId + "\"");
httpResponse.AddHeader("Content-Type", "Application/msexcel");
httpResponse.Clear();
byte[] buffer = new byte[stream.Length + 1]; // Fairly arbitrary size
int bytesRead;
while ((bytesRead = stream.Read(buffer, 0, buffer.Length)) > 0)
{
httpResponse.OutputStream.Write(buffer, 0, bytesRead);
}
httpResponse.Flush();
httpResponse.End();
response.StatusCode = System.Net.HttpStatusCode.OK;
}
catch (Exception ex)
{
response.StatusCode = System.Net.HttpStatusCode.NotFound;
}
return response;
}
- Compile and run the application.
- Click the export option and select the Excel option to export a report to Excel format.
- Now, the exported document is downloaded successfully.
The sample can be downloaded from the following location.
Export report independently from Report Viewer
I hope you enjoyed learning about how to export reports independently from JavaScript Report Viewer.
You can refer to our JavaScript Report Viewer feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Report Viewer example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
