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

Client Export and Preview

Press the Export to PDF button to perform Client-side PDF export and load the result in the PdfViewer component




This integration demo between RadPdfViewer and RadClientExportManager unlishes the power of both controls and allows you to perform client-side export of the desired section of the page, converting it to base64 string and loading it in the PdfViewer via its fromFile client-side method.

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
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ 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>
</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">
        var $ = $telerik.$;

        function exportPDF() {
            $find('<%=RadClientExportManager1.ClientID%>').exportPDF($("#ExportContainer"));
        }

        function OnClientPdfExporting(sender, args) {
            var data = args.get_dataURI().split(',')[1];
            setData(data);
            args.set_cancel(true);
        }

        function setData(data) {

            var RadPdfViewerObject = $find("<%=RadPdfViewer1.ClientID %>");
            RadPdfViewerObject.get_kendoWidget().fromFile({ data: data }); //data.split(',')[1] });
            return false;
        }
    </script>
    <div class="demo-container size-wide no-bg">
        <div id="ExportContainer">
            <div>Press the Export to PDF button to perform Client-side PDF export and load the result in the PdfViewer component</div>
            <br />
            <input type="text" placeholder="Type your name" value="John" />
            <input type="text" placeholder="Type your comment" value="Smith" />
            <br />
            <br />
            <telerik:RadPushButton OnClientClicked="exportPDF" runat="server" Text="Export to PDF" ID="Export1" AutoPostBack="false"></telerik:RadPushButton>
            <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1" OnClientPdfExporting="OnClientPdfExporting">
            </telerik:RadClientExportManager>
            <br />
        </div>
        <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="250px" Width="800px" Scale="0.9"></telerik:RadPdfViewer>
    </div>

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

Support & Learning Resources

Find Assistance