Load SQL database saved MS word document to Syncfusion Document Editor

Question

Model.Attchment contains the byte[] of the document. It comes to the client side with my script, but not displayed in the Document Editor.

This is the script I'm using :

<script>
    var base64Content = "@Html.Raw(Convert.ToBase64String(Model.Attachment))";
    var documentEditor = new ej.documenteditor.DocumentEditor({
        isReadOnly: false
    });

    documentEditor.appendTo('#documenteditor_titlebar');

    // Function to load the document into the Document Editor
    function loadDocument() {
        documentEditor.open({
            document: {
                fileContent: base64Content,
                fileName: "document.docx",
                fileType: "Docx",
            }
        });
    }

    // Load the document when the DOM content is fully loaded
    document.addEventListener("DOMContentLoaded", function () {
        loadDocument();
    });
</script>

Answer 1

In DocumentEditor, when opening a document other than SFDT (Syncfusion Document Editor’s native file format), the server-side web API is invoked from a client-side script.

Client: Sends the input file. Server: receives the input file and sends the converted SFDT back to the client.

And in the client, open the received SFDT using the documentEditor open API.

The server-side web API internally extracts the content from the document (DOCX, DOC, WordML, RTF, HTML) using the Syncfusion Word library (DocIO) and converts it into SFDT for opening the document in Document Editor.

Code snippet:

Server side:

[Route("Load")]

    public string Load(byte[] byteArray)

    {

              Stream stream = new MemoryStream(byteArray);

              Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, FormatType.Docx)

            string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);                                   

           document.Dispose();

            stream.Dispose();

            return json;

            }

Client side:

var documentEditor = new ej.documenteditor.DocumentEditor({

    isReadOnly: false

});

documentEditor.appendTo('#documenteditor_titlebar');

// Function to load the document into the Document Editor

function loadDocument() {

    fetch(

'http://localhost:62870/api/documenteditor/Load',

{

    method: 'POST',

    headers: { 'Content-Type': 'application/json;charset=UTF-8' },

    body: byteArray

}

)

.then(response => {

if (response.status === 200 || response.status === 304) {

    return response.json(); // Return the Promise

} else {

    throw new Error('Error loading data');

}

})

.then(json => {

documenteditorContainer.documentEditor.open(JSON.stringify(json));

})

.catch(error => {

console.error(error);

}); }

// Load the document when the DOM content is fully loaded

document.addEventListener("DOMContentLoaded", function () {

    loadDocument();

});

UG documentation to know about documentEditor overview: https://ej2.syncfusion.com/documentation/document-editor/overview