Search results

Export

Document editor exports the document into various known file formats in client-side such as Microsoft Word document (.docx), text document (.txt), and its own format called Syncfusion Document Text (.sfdt).

Sfdt export

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

tagHelper
document-editor.cs
<ejs-button id="export">Export</ejs-button>
<div id="documenteditor" style="width:100%;height:100%">
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true id="container"></ejs-documenteditor>    
</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();
    }

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 Word document (.docx).

tagHelper
document-editor.cs
<ejs-button id="export">Export</ejs-button>
<div id="documenteditor" style="width:100%;height:100%">
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableWordExprot=true id="container"></ejs-documenteditor>    
</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();
    }

To enable word export for a document editor instance, set enableWordExport to true.

Text export

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

tagHelper
document-editor.cs
<ejs-button id="export">Export</ejs-button>
<div id="documenteditor" style="width:100%;height:100%">
<ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableTextExport=true id="container"></ejs-documenteditor>    
</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();
    }

To enable text export for a document editor instance, set enableTextExport to true.

Export as blob

Document editor also supports API to store the document into a blob. Refer to the following sample to export document into blob in client-side.

tagHelper
<ejs-button id="export">Export</ejs-button>
<div id="documenteditor">
<ejs-documenteditor enableSfdtExport=true enableWordExport=true exnableTextExport=true id="container"></ejs-documenteditor>    
</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>

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

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

In client-side, you can consume this web service and save the document as Rich Text Format (.rtf) file. Refer to the following example.

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

See Also