How to save document as Docx in Vue 3

[Rama Ibrahim]

I tried using this code I followed from the tutorial but it doesn't work

<template>

<div class="">

    <button v-on:click='saveAsDocx' >Save</button>

  <ejs-documenteditorcontainer ref="documenteditor" :enableWordExport='true' height="1245px" :serviceUrl='serviceUrl' :enableToolbar='true'> </ejs-documenteditorcontainer>

</div>

</template>

<script>

  import { DocumentEditorContainerComponent, Toolbar, WordExport } from '@syncfusion/ej2-vue-documenteditor';

  //Component registeration

  export default {

name: 'App',

components: {

  // Declaring component

  'ejs-documenteditorcontainer' : DocumentEditorContainerComponent

},

data () {

  return {

    serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'

  };

},

methods: {

    saveAsDocx: function() {

        //Download the document in docx format.

        this.$refs.documenteditor.save('sample', 'Docx')

    }

},

provide: {

  DocumentEditorContainer: [Toolbar, WordExport]

}

  }

</script>

<style>

  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";

</style>

[Rama Ibrahim]

Solved by using this code

<template>

<div class="">

    <button v-on:click='onExport' >Save</button>

  <ejs-documenteditorcontainer ref="doceditcontainer" :enableWordExport='true' height="1245px" :serviceUrl='serviceUrl' :enableToolbar='true'> </ejs-documenteditorcontainer>

</div>

</template>

<script>

  import { DocumentEditorContainerComponent, Toolbar, WordExport } from '@syncfusion/ej2-vue-documenteditor';

  //Component registeration

  export default {

name: 'App',

components: {

  // Declaring component

  'ejs-documenteditorcontainer' : DocumentEditorContainerComponent

},

data () {

  return {

    serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'

  };

},

methods: {

     onExport: function () {

         this.$refs.doceditcontainer.ej2Instances.documentEditor.save(

this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName ===

'' ? 'sample' :  this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName, 'Docx');

        // this.$refs.documenteditor.ej2Instances.print()

},

},

provide: {

  DocumentEditorContainer: [Toolbar, WordExport]

}

  }

</script>

<style>

  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";

</style>

[Nivetha Anandan]

Hi Rama Ibrahim,

 

We're happy to hear that your issue has been resolved on your end. Please feel free to contact us if you need any other assistance.

 

Regards,

Nivetha