Editor - Export to PDF

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This online demo demonstrates the export to PDF feature of RadEditor.

The approach is very straight-forward - to export the editor content to PDF format:

  1. Enable the PdfExportFilter filter of RadEditor: ContentFilters="DefaultFilters,PdfExportFilter" - if it is disabled the tables wont be exported
  2. Fire the ExportToPdf() server-side method to export the content to PDF file

It is also possible to export the content as PDF on the server via the new OnExportContent event property of RadEditor.
You may also need to configure the exporting settings for the editor through the RadEditor.ExportSettings section. The available properties are:
  • FileName - a string specifying the name (without the extension) of the file that will be created. The file extension is automatically added based on the method that is used.
  • OpenInNewWindow - open the exported PDF in a new instead of the same page
There is additional sub-category (Pdf) for the ExportSettings dedicated on various configuration settings for the exported .pdf document. Below is a list of them:
  • AllowAdd - Boolean property which determines whether content adding is allowed
  • AllowCopy - Boolean property which determines whether content copying is allowed
  • AllowModify - Boolean property which determines whether content modifications are allowed
  • AllowPrint - Boolean property which determines whether the pdf document can be printed
  • PageTitle - Sets the title of the page
  • PageLeftMargin - Sets the left margin for the pages in the pdf document
  • PageRightMargin - Sets the right margin for the pages in the pdf document
  • PageTopMargin - Sets the top margin for the pages in the pdf document
  • PageBottomMargin - Sets the bottom margin for the pages in the pdf document
  • PageHeaderMargin - Sets the header margin for the pages in the pdf document
  • PageFooterMargin - Sets the footer margin for the pages in the pdf document
  • PageHeight - Sets the height of the pages in the pdf document
  • PageWidth - Sets the width of the pages in the pdf document
  • Author - Sets the name of the author of the pdf document
  • Keywords - Sets the keywords for the pdf document
  • Subject - Sets the subject of the pdf document
  • Title - Sets the title of the pdf document
  • PaperSize - Enumeration which specifies the paper font size.The default value is Letter
  • Producer - Specifies the producer of the resulting pdf document
  • Creator - Specifies the creator of the resulting pdf document

Unsupported features / scenarios:

Although we are striving to constantly improve our products, there are some limitations in the current implementation of our PDF engine:

  • Image transparency;
  • Right-to-left fonts;
  • Nested DIV elements with absolute position;
  • Nested DIV elements with specified width or height;
  • Automatic text clipping;
  • Client-side binding;
  • Medium trust;
  • Img tags that point to non-existing image files break the PDF file generation;
  • Exporting full HTML page (currently, only the content inside the body tag can be exported).

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.PdfExport.DefaultCS"  %>

<%@ 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>
<link href="../../Common/styles.css" rel="stylesheet" type="text/css" />
    <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" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadButton RenderMode="Lightweight" ID="Button1" Text="Export RadEditor content to PDF" runat="server"
                OnClick="Button1_Click" CssClass="export-button">
            </telerik:RadButton>
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server" ContentFilters="DefaultFilters,PdfExportFilter">
                <ExportSettings OpenInNewWindow="true">
                </ExportSettings>
                <Content>
            <h2 style="background-color: #689a05; color: #ffffff; text-align: center;font-size: 22px; font-family: segoe ui;">RadEditor for ASP.NET AJAX</h2>
            <p style="text-align: justify;"><span style="font-size: 19px; color: #4f6128;"><strong>RadEditor</strong></span><span style="color: #4f6128;"> </span>is not simply an HTML<sup>1</sup> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong> output, fast rendering, widest cross-browser support, and <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx">tons of features</a>: <br />
            <br />
            <img style="margin-top: 25px; float: left; margin-right: 15px;" alt="product logo" src="../../../images/editor.jpg" /></p>
            <ul style="width: 350px; float: left;">
                <li>
                <em>Out-of-the-box XHTML-enabled Output...</em>
                </li>
                <li>
                <em>Unmatched Loading Speed and Performance</em>
                </li>
                <li>
                <em>Microsoft Word-like Spell-checking</em>
                </li>
                <li>
                <em>Seven Ways for Pasting from Word</em>
                </li>
                <li>
                <em>Multilevel Undo/Redo with Action Trails</em>
                </li>
                <li>
                <em>Extended Functionality Through Integrated Controls</em>
                </li>
            </ul>
            <table width="500" style="margin: 0pt auto; width: 0px;clear:both;">
                <colgroup><col><col><col><col></colgroup>
                <thead>
                    <tr>
                        <th style="background-color: #ebf1dd;">Browser/OS</th>
                        <th style="background-color: #ebf1dd;">Windows</th>
                        <th style="background-color: #ebf1dd;">Mac OS</th>
                        <th style="background-color: #ebf1dd;">Linux</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td align="center" style="text-align: left; vertical-align: middle;"><img style="float: left;" alt="ie" src="../../../images/BrowserIcons/ie.gif" />&nbsp; Internet Explorer</td>
                        <td valign="top" style="background-color: #f2f2f2;">6.0+</td>
                        <td valign="top" style="background-color: #e5e0ec;">- </td>
                        <td valign="top" style="background-color: #dbeef3;">- </td>
                    </tr>
                    <tr>
                        <td><img style="float: left;" alt="ff" src="../../../images/BrowserIcons/ff.gif" />&nbsp; Firefox</td>
                        <td style="background-color: #f2f2f2;">1.5+</td>
                        <td style="background-color: #e5e0ec;">1.5+</td>
                        <td style="background-color: #dbeef3;">1.5+</td>
                    </tr>
                    <tr>
                        <td><img style="float: left;" alt="chrome" src="../../../images/BrowserIcons/chrome.gif" />&nbsp; Google Chrome</td>
                        <td style="background-color: #f2f2f2;">0.2+</td>
                        <td style="background-color: #e5e0ec;">5.0+</td>
                        <td style="background-color: #dbeef3;">5.0+</td>
                    </tr>
                    <tr>
                        <td><img style="float: left;" alt="opera" src="../../../images/BrowserIcons/opera.gif" />&nbsp; Opera</td>
                        <td style="background-color: #f2f2f2;">9.0+</td>
                        <td style="background-color: #e5e0ec;">9.0+</td>
                        <td style="background-color: #dbeef3;">-</td>
                    </tr>
                    <tr>
                        <td><img style="float: left;" alt="safari" src="../../../images/BrowserIcons/safari.gif" />&nbsp; Safari</td>
                        <td style="background-color: #f2f2f2;">3.0+</td>
                        <td style="background-color: #e5e0ec;">3.0+</td>
                        <td style="background-color: #dbeef3;">-</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <p style="border-top: 1px solid #555;padding-top: 10px;">
            <sup><sup><a id="HTMLDescription">1.</a></sup>The computer language used to create world-wide-web pages which are read by browsers.</sup>
            </p>
                </Content>
                <Modules>
                    <telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="false" />
                    <telerik:EditorModule Name="RadEditorNodeInspector" Enabled="false" />
                    <telerik:EditorModule Name="RadEditorDomInspector" Enabled="false" />
                    <telerik:EditorModule Name="RadEditorStatistics" Enabled="false" />
                </Modules>
            </telerik:RadEditor>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?