Export in ASP.NET MVC DOCX Editor

14 Aug 202616 minutes to read

ASP.NET MVC DOCX Editor (Document Editor) exports the document into various known file formats on the client side such as Microsoft Word document (.docx), text document (.txt), and its own format called Syncfusion Document Text (.sfdt).

We are providing two types of save APIs as mentioned below.

API name Purpose Code Snippet for Document Editor Code Snippet for Document Editor Container
save(filename,FormatType):void
FormatType: Sfdt or Docx or Txt		 Creates the document with specified file name and format type. Then, the created file is downloaded in the client browser by default. documenteditor.save(‘sample’, ‘Docx’) container.documentEditor.save(‘sample’, ‘Docx’)
saveAsBlob(FormatType):Blob Creates the document in specified format type and returns the created document as Blob.
This blob can be uploaded to your required server, database, or file path.		 documenteditor.saveAsBlob(‘Docx’) container.documentEditor.saveAsBlob(‘Docx’)

Sfdt export

The following example shows how to export documents in the Document Editor as Syncfusion document text (.sfdt).

@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        document.getElementById('export').addEventListener('click', function () {
            documenteditor.save('sample', 'Sfdt');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}
@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.resize();
        document.getElementById('export').addEventListener('click', function () {
            container.documentEditor.save('sample', 'Sfdt');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}

NOTE

To enable Sfdt export for a Document Editor instance, set enableSfdtExport to true.

Word export

The following example shows how to export the document as a Word document (.docx).

@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableWordExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");        
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        document.getElementById('export').addEventListener('click', function () {
            documenteditor.save('sample', 'Docx');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}
@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.resize();
        document.getElementById('export').addEventListener('click', function () {
            container.documentEditor.save('sample', 'Docx');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}

NOTE

To enable Word export for a Document Editor instance, set enableWordExport to true.

Word Template Export

The following example shows how to export the document as a Word Template (.dotx).

NOTE

The Syncfusion® Document Editor component’s document pagination (page-by-page display) can’t be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about why the document pagination (page-by-page display) differs from Microsoft Word

@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableWordExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");        
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        document.getElementById('export').addEventListener('click', function () {
            documenteditor.save('sample', 'Dotx');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}
@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.resize();
        document.getElementById('export').addEventListener('click', function () {
            container.documentEditor.save('sample', 'Dotx');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}

Text export

The following example shows how to export the document as a text document (.txt).

@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableTextExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        documenteditor = documenteditorElement.ej2_instances[0];
        documenteditor.resize();
        document.getElementById('export').addEventListener('click', function () {
            documenteditor.save('sample', 'Txt');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}
@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.resize();
        document.getElementById('export').addEventListener('click', function () {
            container.documentEditor.save('sample', 'Txt');
        });
    }); 
</script>
public ActionResult Default()
{
    return View();
}

NOTE

To enable text export for a Document Editor instance, set enableTextExport to true.

Export as blob

Document Editor also supports an API to store the document into a blob.

@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor">
    @Html.EJS().DocumentEditor("container").EnableSfdtExport(true).EnableWordExport(true).EnableTextExport(true).Render()
</div>

<script>
    var documenteditor;
    documenteditor = documenteditorElement.ej2_instances[0];
    documenteditor.resize();
    documenteditor.open(sfdt);
    document.getElementById('export').addEventListener('click', function () {
        documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
            // The blob can be processed further
        });
    });
</script>
@Html.EJS().Button("export").Content("Export").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.resize();
        document.getElementById('export').addEventListener('click', function () {
            container.documentEditor.saveAsBlob('Docx');
        });
    }); 
</script>

For instance, to export the document as a Rich Text Format file, implement an ASP.NET MVC web API controller using the DocIO library by passing the DOCX blob.

//API controller for the conversion.
[HttpPost]
public HttpResponseMessage ExportAsRtf()
{
    System.Web.HttpPostedFile data = HttpContext.Current.Request.Files[0];
    //Opens document stream
    WordDocument wordDocument = new WordDocument(data.InputStream);
    MemoryStream stream = new MemoryStream();
    //Converts document stream as RTF
    wordDocument.Save(stream, FormatType.Rtf);
    wordDocument.Close();
    stream.Position = 0;
    return new HttpResponseMessage() { Content = new StreamContent(stream) };
}

On the client side, you can consume this web service and save the document as a Rich Text Format (.rtf) file.

document.getElementById('export').addEventListener('click', () => {
    documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
        // The blob can be processed further
        var formData = new FormData();
        formData.append('fileName', 'sample.docx');
        formData.append('data', exportedDocument);
        saveAsRtf(formData);
    });
});

function saveAsRtf(formData) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true);
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200 || httpRequest.status === 304) {
                if (!(!navigator.msSaveBlob)) {
                    navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
                } else {
                    var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    download('sample.rtf', 'rtf', httpRequest.response, downloadLink, 'download' in downloadLink);
                }
            } else {
                console.error(httpRequest.response);
            }
        }
    }
    httpRequest.responseType = 'blob';
    httpRequest.send(formData);
}

function download(fileName, extension, buffer, downloadLink, hasDownloadAttribute) {
    if (hasDownloadAttribute) {
        downloadLink.download = fileName;
        var dataUrl = window.URL.createObjectURL(buffer);
        downloadLink.href = dataUrl;
        var event = document.createEvent('MouseEvent');
        event.initEvent('click', true, true);
        downloadLink.dispatchEvent(event);
        setTimeout(function () {
            window.URL.revokeObjectURL(dataUrl);
            dataUrl = undefined;
        });
    } else {
        if (extension !== 'docx' && extension !== 'xlsx') {
            var url = window.URL.createObjectURL(buffer);
            var isPopupBlocked = window.open(url, '_blank');
            if (!isPopupBlocked) {
                window.location.href = url;
            }
        }
    }
}

Online Demo

Explore how to export Word documents in various formats using the ASP.NET MVC Document Editor in this live demo here.

See Also