Search results

Server side export in Vue DocumentEditor component

02 Feb 2023 / 2 minutes to read

SFDT to DOCX export

Document Editor supports server-side export of Syncfusion Document Text (.sfdt) to Doc, DOCX, RTF, Txt, WordML, HTML formats using server-side helper **Syncfusion.EJ2.DocumentEditor** available in ASP.NET Core & ASP.NET MVC platform in the below NuGet’s.

Please refer the following code example.

Copied to clipboard
//API controller for the conversion.
public void ExportSFDT([FromBody]SaveParameter data)
    Stream document = WordDocument.Save(data.content, FormatType.Docx);
    FileStream file = new FileStream("sample.docx", FileMode.OpenOrCreate, FileAccess.ReadWrite);

public class SaveParameter
    public string content { get; set; }

Please refer the client side example to serialize the sfdt and send to the server.

Copied to clipboard
<div id="app">
     <button v-on:click='exportBlob' >Save</button>
    <ejs-documenteditor ref="documenteditor" :enableSfdtExport='true' :enableWordExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
    import Vue from 'vue'
    import { DocumentEditorPlugin, Selection, Editor, SfdtExport, WordExport } from '@syncfusion/ej2-vue-documenteditor';


    export default {
        data: function() {
            return {
        provide: {
            //Inject require modules.
            DocumentEditor : [SfdtExport, WordExport, Selection, Editor]
        methods: {
            exportBlob: function() {
                let http: XMLHttpRequest = new XMLHttpRequest();
      'POST', 'http://localhost:5000/api/documenteditor/ExportSFDT');
                http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
                http.responseType = 'json';
                //Serialize document content as SFDT.
                let sfdt: any = { content: this.$refs.documenteditor.serialize() };
                //Send the sfdt content to server side.
  @import "../../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";

DocumentEditor object is available in DocumentEditorContainer component(DocumentEditor packaged with toolbar, status bar & properties pane) as documentEditor