PdfViewer

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 .

  • 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>
<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