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

Export Whole Pages

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