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

Import and Export to DOCX

  • 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
  • Demo Configurator
Export Settings
  • Spin UpSpin Down
  • Spin UpSpin Down
Import Settings

The demo shows the Import and Export from/to DOCX feature of the RadEditor control.

Since Q3 2014 the RadEditor control offers built-in integration with the Telerik document processing libraries that provide the import and export from/to DOCX feature.

Enabling the Import and Export from/to DOCX Feature

To enable the Import and Export from/to DOCX feature, you should reference the Telerik document processing assemblies. You can find more details about the process in the Export to DOCX and RTF article.

Importing DOCX Content

You can import DOCX content in the Editor via its LoadDocxContent() server method and, optionally, fine tune the imported content via the Import Settings.

By default, the generated HTML content is not a full HTML page (i.e., it does not begin with the <html> tag, but with generic tags like <p>), the images are converted to a base64 string and the document styling (e.g., text colors and fonts) is stored in a <style> tag in the content.

You can get a full HTML page in the editor (i.e., content that begins with the <html> tag) by setting the Document Level Import setting to Document.

You can store the imported images in a folder under the application by setting the Images Mode Import property to External and the ImagesFolderPath property points to the desired path. You can see them in the Image Manager dialog -

You can control where the document styling is stored through the Styles Mode Import setting. If you set it to External, the generated CSS rules are written in a file if your choice (ImportedStyles.css is the file we have chosen for this demo). You can control which file from the application is used via the StylesFilePath and StylesSourcePath properties..

Exporting to an DOCX File

To export the current editor content, you can call the ExportToDocx() server method and fine tune the exporting via the Export Settings.

Optionally, you can set the default font name and size for the exported document through the DefaultFontName and DefaultFontSizeInPoints Export settings.

You can also add a header and predefine its size via the PageHeader and HeaderFontSizeInPoints Export settings.

If you are interested in the Import and Export from/to RTF feature, you can examine to the Import and Export to RTF demo.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • ImportedStyles.css
    • ImportedStyles.css
    • styles.css
<%@ Page Language="vb" AutoEventWireup="false"  CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ImportExplor.DOCXImportExport.DefaultVB" %>

<%@ 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>
<link href="../../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="Styles.css" rel="stylesheet" />
    <script src="Scripts.js" type="text/javascript"></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-containers">
    <div class="demo-container">
        <div class="errorLog">
            <asp:Label runat="server" ID="ImportErrorLog" CssClass="importErrorLog" />
            <asp:Label runat="server" ID="ExportErrorLog" CssClass="exportErrorLog" />
        </div>
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Height="675px" SkinID="DefaultSetOfTools"
            ContentFilters="PdfExportFilter, DefaultFilters" CssClass="centered-editor">
            <ImageManager ViewPaths="~/Editor/Examples/Import-Export/DOCX-Import-Export/images" />
            <ExportSettings>
                <Docx DefaultFontName="Arial" DefaultFontSizeInPoints="12" HeaderFontSizeInPoints="20" PageHeader="RadEditor" />
            </ExportSettings>
            <ImportSettings>
                <Docx DocumentLevel="Fragment" ImagesFolderPath="images" ImagesMode="Embedded" ImagesSourceBasePath="images/" StylesFilePath="ImportedStyles.css" StylesMode="Embedded" StylesSourcePath="ImportedStyles.css" />
            </ImportSettings>
        </telerik:RadEditor>
    </div>
    </div>

    <script type="text/javascript">
        function pageLoad() {
            DOCXImportExportDemo.initialize($telerik.$, "<%= ImportDocx.ClientID %>", "exportErrorLog", "importErrorLog");
        }
    </script>

    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" ID="ExportSettins" Title="Export Settings" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ListOfFonts" EmptyMessage="Select export font"
                                Label="Default Font Name" MaxHeight="400px">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="rntbDefaultFontSize" Label="Default Font Size In Points"
                                Width="370px" LabelWidth="210px" NumberFormat-DecimalDigits="0" MinValue="12">
                            </qsf:NumericTextBox></li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="rntbHeaderFontSize" Label="Header Font Size In Points"
                                Width="370px" LabelWidth="210px" NumberFormat-DecimalDigits="0" MinValue="12">
                            </qsf:NumericTextBox></li>
                        <li>
                            <qsf:TextBox runat="server" ID="rtbPageHeader" Text="RadEditor" Label="Page Header"
                                Width="370px" LabelWidth="210px">
                            </qsf:TextBox></li>
                        <li>
                            <qsf:Button Text="Export To DOCX" runat="server" ID="ExportToDOCX" OnClick="ExportToDOCX_Click" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" ID="ImportSettings" Title="Import Settings" Size="wide">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="rcbDocumentLevel" Label="Document Level">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="rcbImagesMode" Label="Images Mode">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="rcbStylesMode" Label="Styles Mode">
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <label class="label">Upload DOCX file</label>
                            <telerik:RadAsyncUpload RenderMode="Lightweight" ID="docxUpload" runat="server" AllowedFileExtensions=".docx" Width="320px"
                                UploadedFilesRendering="BelowFileInput" MaxFileSize="2097152" MaxFileInputsCount="1" Skin="MetroTouch"
                                OnClientFileUploaded="OnClientFileUploaded" OnClientFileUploadRemoved="OnClientFileUploadRemoved"
                                CssClass="upload">
                                <Localization Select="Upload" />
                            </telerik:RadAsyncUpload>
                        </li>
                        <li>
                            <qsf:Button ID="ImportDocx" Text="Import Selected DOCX File" runat="server" OnClick="ImportDocx_Click" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance