Telerik skin

PdfViewer - Convert, View and Download Different Formats

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


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 .

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.PdfViewer.DPLIntegration.DefaultVB" CodeFile="DefaultVB.aspx.vb" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>
    <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

Help Us Improve

Was this example helpful?