Auto save document in document editor in Vue Document editor component

16 Jul 20249 minutes to read

In this article, we are going to see how to autosave the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.

The following example illustrates how to auto save the document in server.

In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on contentChanged boolean, the document send as Docx format to server-side using saveAsBlob method.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated"
      v-on:contentChange="contentChangeEvent" height="590px" id='container'
      :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';

const container = ref(null);
const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
const contentChanged = ref(false);

//Inject require modules.
provide('DocumentEditorContainer', [Toolbar]);

const contentChangeEvent = function () {
  contentChanged.value = true;
}
const onCreated = function () {
  setInterval(() => {
    if (contentChanged.value) {
      //You can save the document as below
      container.value.ej2Instances.documentEditor
        .saveAsBlob('Docx')
        .then((blob) => {
          console.log('Saved sucessfully');
          let exportedDocument = blob;
          //Now, save the document where ever you want.
          let formData = new FormData();
          formData.append('fileName', 'sample.docx');
          formData.append('data', exportedDocument);
          /* tslint:disable */
          var req = new XMLHttpRequest();
          // Replace your running Url here
          req.open(
            'POST',
            'http://localhost:62869/api/documenteditor/AutoSave',
            true
          );
          req.onreadystatechange = () => {
            if (req.readyState === 4) {
              if (req.status === 200 || req.status === 304) {
                console.log('Saved sucessfully');
              }
            }
          };
          req.send(formData);
        });
      contentChanged.value = false;
    }
  }, 1000);
}
</script>
<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated"
      v-on:contentChange="contentChangeEvent" height="590px" id='container'
      :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
  },
  data() {
    return {
      serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',
      contentChanged: false
    };
  },
  provide: {
    //Inject require modules.
    DocumentEditorContainer: [Toolbar]
  },
  methods: {
    contentChangeEvent: function () {
      this.contentChanged = true;
    },
    onCreated: function () {
      setInterval(() => {
        if (this.contentChanged) {
          //You can save the document as below
          this.$refs.container.ej2Instances.documentEditor
            .saveAsBlob('Docx')
            .then((blob) => {
              console.log('Saved sucessfully');
              let exportedDocument = blob;
              //Now, save the document where ever you want.
              let formData = new FormData();
              formData.append('fileName', 'sample.docx');
              formData.append('data', exportedDocument);
              /* tslint:disable */
              var req = new XMLHttpRequest();
              // Replace your running Url here
              req.open(
                'POST',
                'http://localhost:62869/api/documenteditor/AutoSave',
                true
              );
              req.onreadystatechange = () => {
                if (req.readyState === 4) {
                  if (req.status === 200 || req.status === 304) {
                    console.log('Saved sucessfully');
                  }
                }
              };
              req.send(formData);
            });
          this.contentChanged = false;
        }
      }, 1000);
    },
  },
};
</script>

In server-side, Receives the stream content from client-side and process it to save the document in Server or Database from the received stream. Add Web API in controller file like below to save the document.

  [AcceptVerbs("Post")]
  [HttpPost]
  [EnableCors("AllowAllOrigins")]
  [Route("AutoSave")]
  public string AutoSave()
  {
      IFormFile file = HttpContext.Request.Form.Files[0];
      Stream stream = new MemoryStream();    
      file.CopyTo(stream);
      //Save the stream to database or server as per the requirement.
      stream.Close();
      return "Sucess";
  }

Auto save document in document editor in Vue Document editor component

See Also