How to preview a PDF file in ASP.NET Web Forms FileExplorer?
By default,the FileExplorer component supports previewing only image files.However,you can also preview ASP.NET Web Forms PDF document using the PDFViewer control. Initially, pass the file path to the PDFViewer control with service URL pointing to the PDFViewer controller in the “BeforeOpen” event of FileExplorer, and then include the controller that processes the file path and opens the file in a new window. Refer to the following code sample to know about previewing PDF documents in FileExplorer.
Asp.Net
[View page]
C#
<ej:FileExplorer ID="fileexplorer" runat="server" CssClass="myFileBrowser" IsResponsive="true" Width="100%" AjaxAction="FileExplorerFeatures.aspx/FileActionDefault" Path="~/content/images/FileExplorer/" ClientSideOnBeforeOpen="beforeOpen" Layout="Tile"> </ej:FileExplorer>
<script>
function beforeOpen(args) { //FileExplorer beforeOpen event function
if (args.path.includes(".pdf")) { //Check if file is pdf
var items = ~ej.PdfViewer.ToolbarItems.PrintTools & ~ej.PdfViewer.ToolbarItems.DownloadTool;
var ws = window.open("", '_blank', "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no")
ws.document.write('<!DOCTYPE html><html><head><title>PdfViewer</title><link rel="stylesheet" type="text/css" href="https://cdn.syncfusion.com/16.4.0.54/js/web/flat-azure/ej.web.all.min.css"><script src="https://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"><\/script><script src="https://cdn.syncfusion.com/16.4.0.54/js/web/ej.web.all.js"><\/script><\/head><body>');
ws.document.write('<div style="width:100%;min-height:570px"><div id="container"><\/div><\/div>')
ws.document.write("<script>$(function(){ $('#container').ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentPath: '" + args.path + "', toolbarSettings: { toolbarItem:'" + items + "'}})})<\/script>") //Path of the pdfviewer controller is passed to serviceUrl
ws.document.write('<\/body><\/html>');
ws.document.close();
}
}
</script>
Add an API controller for the PDFViewer to preview the pdf files, and then include the following code in controller.
[Controller]
C#
public class PdfViewerController : ApiController
{
public object Load(Dictionary<string, string> jsonResult)
{
PdfViewerHelper helper = new PdfViewerHelper();
var WebClient = new WebClient();
if (jsonResult.ContainsKey("newFileName"))
{
var pdfName = jsonResult["newFileName"].ToString();
string urlLink = Url.Content("~/") + "content/images/FileExplorer/" + pdfName;
byte[] pdfDoc = WebClient.DownloadData(urlLink); //converts the url to byte array
helper.Load(pdfDoc); //loads the byte array in PDF Viewer
}
else
{
if (jsonResult.ContainsKey("isInitialLoading"))
{
if (jsonResult.ContainsKey("file"))
{
string urlLink = Url.Content("~/") + jsonResult["file"].ToString().Substring(jsonResult["file"].ToString().IndexOf("/") + 1);
byte[] pdfDoc = WebClient.DownloadData(urlLink); //converts the url to byte array
helper.Load(pdfDoc); //loads the byte array in PDF Viewer
}
else
{
string urlLink = Url.Content("~/") + "content/images/FileExplorer/pdf/HTTP Succinctly.pdf";
byte[] pdfDoc = WebClient.DownloadData(urlLink); //converts the url to byte array
helper.Load(pdfDoc); //loads the byte array in PDF Viewer
}
}
}
return JsonConvert.SerializeObject(helper.ProcessPdf(jsonResult));
}
public object Download(Dictionary<string, string> jsonResult)
{
PdfViewerHelper helper = new PdfViewerHelper();
return helper.GetDocumentData(jsonResult);
}
public object FileUpload(Dictionary<string, string> jsonResult)
{
PdfViewerHelper helper = new PdfViewerHelper();
if (jsonResult.ContainsKey("uploadedFile"))
{
var fileurl = jsonResult["uploadedFile"];
byte[] byteArray = Convert.FromBase64String(fileurl);
MemoryStream stream = new MemoryStream(byteArray);
helper.Load(stream);
}
return JsonConvert.SerializeObject(helper.ProcessPdf(jsonResult));
}
}
Final output
Conclusion
I hope you enjoyed learning about how to preview a PDF file in ASP.NET WebForm?
You can refer to our ASP.NET WebForm PDF Feature tour page to know about its other groundbreaking feature representations and documentation,and to quickly get started for configuration specifications.You can also explore our ASP.NET WebForms PDF 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 trialto 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!
Sample: https://github.com/SyncfusionExamples/ej1-file-explorer-preview-pdf-files-using-pdfviewer
