5 Different Approaches of Setting up the Content in RadPdfViewer for ASP.NET AJAX

Having troubles loading your PDF files in the Telerik PdfViewer for ASP.NET AJAX? Take a few minutes to check out these options—I bet you won’t regret it!

The purpose of this blog post is to reveal some known and unknown techniques of loading PDF files/content in RadPdfViewer for ASP.NET AJAX, explaining them with examples in order to help you incorporate the UI component in a more diverse set of applications and scenarios. Either on the server or on the client, via virtual or physical paths, from a file or a database, via local or remote file destinations, via URL, via memory streams and even via a Base64 string—this is all possible thanks to the advanced API of the component.

Let’s dive deeper and check out the possibilities to load a PDF file one by one:

• Accessible file on another domain
• File in the application folder—using local or relative path
• File stored on the host machine, out of the app folder
• File from FileStream (MemoryStream)
• File represented by a Base64 string on the client side

Accessible File on Another Domain

Loading a file via URL on another domain is simple and straightforward with RadPdfViewer. The File property of the component is exposed particularly to pass a path pointing to an existing PDF file.

The File property can be set in the PdfjsProcessingSettings inner tag of RadPdfViewer.

A common problem with presenting a file from an external domain is the cross-domain accessibility. So as long as the CORS policy of the server where the PDF file is located allows remote access, the RadPdfViewer should be able to display that document. Check out the following resources discussing this topic:

• Can I load a PDF from another server (cross domain request)?
• “No 'Access-Control-Allow-Origin' header is present on the requested resource” error

When the file is not accessible due to CORS policy, a JavaScript error indicating the problem is thrown on the browser’s console:

File in the Application Folder—Using Local or Relative Path

The approach for loading a locally positioned PDF file in the RadPdfViewer is the same as the one above. You should only set a relative path to the file property and, in this case, you should not worry about the cross-origin issue.

There are three ways to set the file path:

• Define the path in the declaration of the control:
  
  <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9">

  <PdfjsProcessingSettings File="Content/Document.pdf">

  </PdfjsProcessingSettings>

  </telerik:RadPdfViewer>
• Set the file path in the code-behind:
  
  <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9" OnLoad="RadPdfViewer1_Load">

  </telerik:RadPdfViewer>
  C#
  
  protected void RadPdfViewer1_Load(object sender, EventArgs e)

  {

  (sender as RadPdfViewer).PdfjsProcessingSettings.File = "Content/Document.pdf";

  }
  VB
  
  Protected Sub RadPdfViewer1_Load(ByVal sender As Object, ByVal e As EventArgs)

  (TryCast(sender, RadPdfViewer)).PdfjsProcessingSettings.File = "Content/Document.pdf"

  End Sub
• Set the path on the client side:
  
  <script>

  function pdfViewerLoad(sender, args) {

  var pdfViewer = sender;

  pdfViewer.fromFile("http://localhost:29842/Document.pdf");

  }

  </script>

  <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9">

  <ClientEvents OnLoad="pdfViewerLoad" />

  </telerik:RadPdfViewer>

Important note: The rendering engine of the RadPdfViewer operates completely on the client side; therefore, in all the cases where an absolute or relative path is passed to the control, an additional HTTP request is performed to fetch the file.

Information about the request for fetching the file from the server can be seen in the Network tab of the Browser’s DevTools as shown below:

File Stored on the Host Machine, Out of the App Folder

How to load a file from a local machine?

You can access any files located in a virtual folder that is a subfolder of the web application. This means that you can create a virtual directory that is a subdirectory of the web application folder pointing to a physical folder located on the machine. You also have to set the needed ASPNET/NETWORK SERVICE permissions to this virtual directory.

For more information, check out How to: Create a virtual directory with IIS Manager for an ASP.NET application.

File from FileStream (MemoryStream)

A common scenario is when the PDF file that is about to be loaded it in the PDF viewer is not yet an existing file. In cases when the PDF is generated programmatically, there are two main options to populate the file to the user:

Option 1: Save the file on the server and provide its path to the RadPdfViewer.

Option 2: Convert the file stream to a Base64 string and assign it as data of the RadPdfViewer.

Sample implementation of this approach is demonstrated in our live demo: Convert, View and Download Different Formats.

Note: Have in mind that the Base64 string may become too long depending on the content of the file and that could cause performance issues when transferring to the client side.

Below is sample code showing both options. To test Option 1, uncomment the relevant code and comment the piece related to Option 2. For generating the PDF file in the sample, we have used the Telerik Document Processing Libraries, so make sure all the required assemblies are referenced before testing the approach:

Note: In its essence, the approach in Option 1 shows how to save the programmatically generated file on the server. Once the file has a physical path, you can follow the same steps and notes as in the File in the application folder—using local or relative path section.

The same functionality can be achieved via Ajax Request (instead of PostBack) to improve the user experience. The code-behind, in this case, stays the same.

Here is the markup with the needed Ajax settings (the Submit button will not be needed in this approach):

File Represented by a Base64 String on the Client Side

You can populate a PDF file to the viewer entirely on the client side. With the help of the fromFile() client-side method, exposed by the RadPdfViewer client-side control object, you can set a Base64 string directly on the client.

Here is a sample scenario where a PDF generated by RadClientExportManager is passed to a RadPdfViewer using the client-side APIs of the controls:

The whole demo is accessible here, so go and give it a spin.

Wrap-up

Having the know-how shared across this blog post, you can now cover all scenarios related to loading PDF contents, files or streams into the RadPdfViewer component. If you stumble upon a different scenario, something useful or just want to share a tip of your own, do not hesitate to place it in the comments section below.

If you like the PdfViewer, you can further play with it at the online demos as well as download its absolutely free and fully functional trial and give it a spin. We value any feedback and the community voice, which you can share at the Feedback Portal too.

Start a Free Trial