ClientExportManager - Export Whole Pages

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

With RadClientExportManager you can export whole pages. Use one of the bellow client-side methods to export the whole page to PDF, image or SVG:

  • exportPDF(DOM element)
  • exportImage(DOM element)
  • exportSVG(DOM element)
Note that for the purposes of the demo only the central and bottom panels will be exported, while you are allowed to export the whole page in your web apps/sites.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.Functionality.ExportPage.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
    <style>
        html #about-demo-wrapper:before {
            border-bottom: 0px;
            height: 0px;
        }

        .buttonsContainer {
            text-align:center;
        }
    </style>

    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="../../../Common/Scripts/pako.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <div class="buttonsContainer">
            <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportPDF" Text="Export page to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
            <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportImage" Text="Export page to Image" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
            <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportSVG" Text="Export page to SVG" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        </div>
        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
    </div>
    <script>
        var $ = $telerik.$;

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

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

        function exportSVG() {
            $find('<%=RadClientExportManager1.ClientID%>').exportSVG($("#main"));
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?