Export Document Images to HTML

Sep 27, 2023
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.
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.

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.

CustomUriProvider.cs
CustomUriProvider.vb

csharp

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

Imports DevExpress.Office.Services
Imports DevExpress.Office.Utils
Imports System
    Public Class CustomUriProvider
        Implements IUriProvider

        #Region "IUriProvider Members"
        Public Function CreateCssUri(ByVal rootUri As String, ByVal styleText As String, ByVal relativeUri As String) As String Implements IUriProvider.CreateCssUri
            Return String.Empty
        End Function

        Public Function CreateImageUri(ByVal rootUri As String, ByVal image As OfficeImage, ByVal relativeUri As String) As String Implements IUriProvider.CreateImageUri
            Return image.Uri
        End Function

MainWindow.xaml.cs
MainWindow.xaml.vb

csharp

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());
            }
        }

Imports DevExpress.Office.Services
Imports DevExpress.XtraRichEdit.API.Native
        Private Sub richEditControl1_DocumentLoaded(ByVal sender As Object, ByVal e As EventArgs)
            Dim service As IUriProviderService = richEditControl1.GetService(Of IUriProviderService)()
            If service IsNot Nothing Then
                service.RegisterProvider(New CustomUriProvider())
            End If
        End Sub