Edit this page

Documentation Import and Export

This article provides basic information on the import and export functionality of the Kendo UI Editor widget for ASP.NET MVC.

Overview

As of the R1 2017 release, the Kendo UI Editor widget for ASP.NET MVC provides capabilities for import and export through the dedicated Kendo.Mvc.Export assembly.

Along with the server-side integration of the Telerik Document Processing suite, there are two new tools that utilize the import and export functionality—ExportAs and Import.

Dependencies

The import and export capabilities are bundled as part of the UI for ASP.NET MVC suite.

To start using the import and export functionality:

  1. Add a reference in your project to the Kendo.MVC.Export assembly.
  2. Add references in your project to the required Telerik Document Processing libraries.

Important

You can get the required assemblies from the telerik.ui.for.aspnetmvc.<version>.zip archive that contains a Kendo.MVC.Export folder with the assemblies for both .NET 4.0 and .NET 4.5 versions.

Getting Started

Exporting Content from the Editor

Below are listed the steps for you to follow when enabling the export capabilities of the Editor.

  1. Add the ExportAs tool.

    Example
    @(Html.Kendo().Editor()
        .Name("Editor")
        .Tools(tools => tools
            .ExportAs()
        )
    )
    
    <%: Html.Kendo().Editor()
            .Name("Editor")
            .Tools(tools => tools
                .ExportAs()
            )
    %>
    

    Alternatively, you can refine the options by configuring the ExportAs tool.

    Example
    @(Html.Kendo().Editor()
        .Name("Editor")
        .Tools(tools => tools
            .ExportAs(export => export
                .Add("DOCX", "docx")
                .Add("RTF", "rtf")
                .Add("PDF", "pdf")
                .Add("HTML", "html")
                .Add("TXT", "txt")
            )
        )
    )
    
    <%: Html.Kendo().Editor()
            .Name("Editor")
            .Tools(tools => tools
                .ExportAs(export => export
                    .Add("DOCX", "docx")
                    .Add("RTF", "rtf")
                    .Add("PDF", "pdf")
                    .Add("HTML", "html")
                    .Add("TXT", "txt")
                )
            )
    %>
    
  2. To enable the tool to contact the server and export a file, configure the Proxy method and, optionally, set up the name of the exported file through the FileName method.

    Example
    @(Html.Kendo().Editor()
        .Name("Editor")
        .Tools(tools => tools
            .ExportAs()
        )
        .ExportAs(exportAs => exportAs
            .FileName("Export")
            .Proxy("Export", "Editor")
        )
    )
    
    <%: Html.Kendo().Editor()
            .Name("Editor")
            .Tools(tools => tools
                .ExportAs()
            )
            .ExportAs(exportAs => exportAs
                .FileName("Export")
                .Proxy("Export", "Editor")
            )
    %>
    
  3. Implement the action method in the corresponding controller.

    Example
    using Kendo.Mvc.Export;
    ...
        [HttpPost]
        public ActionResult Export(EditorExportData data)
        {
            return EditorExport.Export(data);
        }
    ...
    

Importing Content from Files

Similar to exporting, below are listed the steps for you to follow when enabling the Import tool to update the content of the Editor from a file.

  1. Add the Import tool.

    Example
    @(Html.Kendo().Editor()
        .Name("Editor")
        .Tools(tools => tools
            .Import()
        )
    )
    
    <%: Html.Kendo().Editor()
            .Name("Editor")
            .Tools(tools => tools
                .Import()
            )
    %>
    
  2. Configure the Import by using the Proxy and AllowedExtensions methods.

    Example
    @(Html.Kendo().Editor()
        .Name("Editor")
        .Tools(tools => tools
            .Import()
        )
        .Import(import => import
            .AllowedExtensions(new[] { "docx", "rtf", "pdf", "html", "txt" })
            .Proxy("Import","Editor")
        )
    )
    
    <%: Html.Kendo().Editor()
            .Name("Editor")
            .Tools(tools => tools
                .Import()
            )
            .Import(import => import
                .AllowedExtensions(new[] { "docx", "rtf", "pdf", "html", "txt" })
                .Proxy("Import","Editor")
            )
    %>
    

    Important

    The Import tool integrates the Kendo UI Upload HtmlHelper to send a file to the server. You can configure it through the following exposed helper methods:

  3. Implement the action method in the corresponding controller.

    Example
    using Kendo.Mvc.Export;
    ...
        public ActionResult Import(HttpPostedFileBase file)
        {
            var settings = new EditorImportSettings();
            string htmlResult;
            switch (Path.GetExtension(file.FileName))
            {
                case ".docx":
                    htmlResult = EditorImport.ToDocxImportResult(file, settings);
                    break;
                case ".rtf":
                    htmlResult = EditorImport.ToRtfImportResult(file, settings);
                    break;
                case ".pdf":
                    htmlResult = EditorImport.ToPdfImportResult(file, settings);
                    break;
                default:
                    htmlResult = EditorImport.GetTextContent(file);
                    break;
            }
    
            return Json(new { html = htmlResult });
        }
    ...
    

Changing Import and Export Settings

The Document Processing Library provides settings for the import and export. This enables you to fine-tune the way the content is handled in the supported document types.

The following example demonstrates how to use HtmlImportSettings so you can process HTML images before they are exported to RadFlowDocument.

Example
using Kendo.Mvc.Export;
using Telerik.Windows.Documents.Flow.FormatProviders.Html;
...
    [HttpPost]
    public ActionResult Export(EditorExportData data)
    {
        var settings = new EditorDocumentsSettings();
        settings.HtmlImportSettings.LoadFromUri += HtmlImportSettings_LoadFromUri;

        return EditorExport.Export(data);
    }

    private void HtmlImportSettings_LoadFromUri(object sender, LoadFromUriEventArgs e)
    {
        var uri = e.Uri;
        var absoluteUrl = uri.StartsWith("http://") || uri.StartsWith("www.");
        if (!absoluteUrl)
        {
            var filePath = Server.MapPath(uri);
            using (var fileStream = System.IO.File.OpenRead(filePath))
            {
                using (var memoryStream = new MemoryStream())
                {
                    fileStream.CopyTo(memoryStream);
                    e.SetData(memoryStream.ToArray());
                }
            }
        }
    }
...

The following example demonstrates hoe to configure the import capabilities so that images are generated with inline base64 data in the HTML <img> tag.

Example
using Kendo.Mvc.Export;
using Telerik.Windows.Documents.Flow.FormatProviders.Html;
...
    public ActionResult Import(HttpPostedFileBase file)
    {
        var settings = new EditorImportSettings();
        settings.ImagesImportMode = ImagesExportMode.Embedded;
        string htmlResult = EditorImport.ToDocxImportResult(file, settings);

        return Json(new { html = htmlResult });
    }
...

For more information on each setting supported by EditorImportSettings, refer to the documentation on HTML export settings.

See Also

For runnable examples on the Kendo UI Editor in ASP.NET MVC applications, browse its How To documentation folder.