New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Convert, View and Download Different Formats

Displayed Document: Document.pdf
Supported formats: .docx / .rtf / .html / .txt / .xlsx / .csv


This is an integration sample between RadPdfViewer and Telerik Document Processing Libraries. You can upload a file from the mentioned formats and it will automatically convert and display it. You can then click on the Download button from the ToolBar menu to save it locally.

It is important to note that not all elements specific to the given format can be converted to PDF. You can find additional details in the Document Processing Libraries Documentation .

For more ideas on how you can set up the content of RadPdfViewer check out the 5 Different Approaches of Setting up the Content in RadPdfViewer blog post.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.PdfViewer.DPLIntegration.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';

        function pageLoad(app, args) {
            var upload = $find('<%= RadAsyncUpload1.ClientID %>');
            $(upload.get_element()).find("input[type='file']").attr("accept", ".docx, .rtf, .html, .txt, .xlsx, .csv");
        }
        function fileUploaded(sender, args) {
            $find('<%= RadAjaxManager1.ClientID %>').ajaxRequest();
        }
    </script>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="false">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAsyncUpload1" />
                    <telerik:AjaxUpdatedControl ControlID="RadPdfViewer1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadLabel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-container size-wide" runat="server">
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
            OnClientFileUploaded="fileUploaded" OnFileUploaded="RadAsyncUpload1_FileUploaded"
            AllowedFileExtensions=".docx,.rtf,.html,.txt,.xlsx,.csv" HideFileInput="true"
            AutoAddFileInputs="false" Localization-Select="Upload And Convert" EnableInlineProgress="false"
            MultipleFileSelection="Disabled" />
        <telerik:RadLabel ID="RadLabel1" runat="server" Text="Displayed Document: <b>Document.pdf</b>"
            Style="float: left;">
        </telerik:RadLabel>
        <telerik:RadLabel ID="RadLabel2" runat="server" Text="Supported formats: <b>.docx / .rtf / .html / .txt / .xlsx / .csv</b>"
            Style="float: right;">
        </telerik:RadLabel>
        <br />
        <br />
        <br />
        <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9">
            <PdfjsProcessingSettings File="../../Document.pdf"></PdfjsProcessingSettings>
        </telerik:RadPdfViewer>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance