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
