How to Open document in read only in Blazor DocumentEditor component

3 Jan 20232 minutes to read

In this article, we are going to see how to open a document in read only mode by default Blazor Word Processor component (a.k.a Document Editor) component.

The following code example illustrate how to open a document in read only mode.

@using Syncfusion.Blazor.DocumentEditor
@using System.IO
@using System.Net
@using System.Text.Json

<SfDocumentEditorContainer @ref="container" EnableToolbar=true Height="590px">
    <DocumentEditorContainerEvents Created="OnLoad" DocumentChanged="OnDocumentChanged"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    string sfdtString;

    protected override void OnInitialized()
    {
        string fileUrl = "https://www.syncfusion.com/downloads/support/directtrac/general/doc/Getting_Started1018066633.docx";
        WebClient webClient = new WebClient();
        byte[] byteArray = webClient.DownloadData(fileUrl);
        Stream stream = new MemoryStream(byteArray);
        //To observe the memory go down, null out the reference of byteArray variable.
        byteArray = null;
        WordDocument document = WordDocument.Load(stream, ImportFormatType.Docx);
        stream.Dispose();
        //To observe the memory go down, null out the reference of stream variable.
        stream = null;
        sfdtString = JsonSerializer.Serialize(document);
        document.Dispose();
        //To observe the memory go down, null out the reference of document variable.
        document = null;
    }
    public void OnLoad(object args)
    {
        SfDocumentEditor editor = container.DocumentEditor;
        editor.OpenAsync(sfdtString);
        //To observe the memory go down, null out the reference of sfdtString variable.
        sfdtString = null;

    }
    public void OnDocumentChanged()
    {
        //Enable read only mode inside `documentChange` event.
        container.RestrictEditing = true;
    }
}

NOTE

You can use the RestrictEditing in DocumentEditorContainer and IsReadOnly in DocumentEditor based on your requirement to change component to read only mode.