How to display report files in PDF Viewer
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 a PDF document using Syncfusion ReportWriter. The following UG link explains how to convert a report file to a PDF document:
https://help.syncfusion.com/aspnetmvc/reportwriter/export-types#exporting-report-as-pdf
The following steps explain how the report file is displayed in the 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 base64 string 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 the report file to a PDF document as a base64 string and returns the same to Viewer.cshtml.
HomeController.cs
C#
public ViewResult Viewer()
{
var _report_name = "GroupingAgg.rdl";
var _report_path_name = @"\" + _report_name;
var _server_root = ((IHostingEnvironment)HttpContext.RequestServices.GetService(typeof(IHostingEnvironment)));
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 base64 string 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 base64 string in Viewer.cshtml, 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];
}In the above sample, while passing the base64 string from the controller to the 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 the document loaded in the PDF Viewer. For example, in the following code, ‘+’ is replaced with “+”.
string base64 = (jsonObject["document"]).ToString();
string converted = base64.Replace("+", "+");
byte[] bytes = Convert.FromBase64String(converted);
stream = new MemoryStream(bytes);Conclusion:
I hope you enjoyed learning about how to display report files in PDF Viewer.
