Skip to main content

Export Document Images to HTML

  • 3 minutes to read

When you save a document as HTML, you can export images within the document as follows:

  • Embed images into an HTML file as Base64-encoded data.

    <img src="data:image/png;base64,,iVBORw0KGgoAAAANSUhEUgAAAQQAAA<!-- base64 data -->" width="260" height="90" alt="" style="border-width:0px;" />
    
  • Save images as separate files. Each image is named with the word “image” followed by the image’s sequential number in the document. Images are saved to a folder with the name that combines the file name, an underscore, and the word “files”. For example, the first PNG image in a Test.html file is saved to Test_files\image0.png.

    <img src="test_files/image0.png" alt="" style="border-width:0px;" />
    

Different HTML export methods produce different results, as shown in the following table:

Export Result
RichEditControl.HtmlText property Images are stored in the resulting HTML file as Base64-encoded data.
SubDocument.GetHtmlText method The HtmlDocumentExporterOptions.EmbedImages option specifies whether to embed images in the HTML file or save them as separate files. The method’s provider parameter allows you to specify custom URIs for images and CSS data.
RichEditControl.SaveDocument and RichEditControl.SaveDocumentAs methods The RichEditControl.ExportOptions.HtmlOptions.EmbedImages property determines whether images are embedded in the HTML document or saved as separate files.

The HTML exporter uses a URI provider to create a URI for each image. The Rich Text Editor uses the following built-in URI providers:

  • FileBasedUriProvider - generates URIs for external images and style sheets;

  • DataStringUriProvider - embeds images as Base64-encoded data.

The built-in URI provider service (a service that implements the IUriProviderService interface) calls these providers when needed and allows you to register a custom provider (see the IUriProviderService.RegisterProvider method).

Retain an Image URI in an HTML Document

The example below implements and registers a custom IUriProvider to save the original image URI (OfficeImage.Uri) to the exported HTML document.

using DevExpress.Office.Services;
using DevExpress.Office.Utils;
using System;
    public class CustomUriProvider : IUriProvider
    {
        public string CreateCssUri(string rootUri, string styleText, string relativeUri) {
            return String.Empty;
        }

        public string CreateImageUri(string rootUri, OfficeImage image, string relativeUri) {
            return image.Uri;
        }
    }
using DevExpress.Office.Services;
using DevExpress.XtraRichEdit.API.Native;
        private void richEditControl1_DocumentLoaded(object sender, EventArgs e)
        {
            IUriProviderService service = richEditControl1.GetService<IUriProviderService>();
            if (service != null)
            {
                service.RegisterProvider(new CustomUriProvider());
            }
        }
See Also