1. Home
  2. Forum
  3. Vue
  4. Not able to access and convert the saved .sfdt file to .docx inside the button tag

Not able to access and convert the saved .sfdt file to .docx inside the button tag

Hey there. When I save my document using Control+S, the file gets saved in .sfdt format. I wanted to convert it into .docx format and also push that docx file to a new folder in my existing github repository. Is it possible?

Here is my code !

```

<template>
  <div id="app">
    <ejs-documenteditorcontainer
      ref="container"
      height="590px"
      :enableToolbar="true"
      :isReadOnly="false"
      :enableSelection="true"
      :enableSfdtExport="true"
      :enableWordExport="true"
      :enableEditor="true"
    >
    </ejs-documenteditorcontainer>
    <button @click="onKeyDown()">Save the file</button>
  </div>
</template>

<script>
import Vue from "vue";
import {
  DocumentEditorPlugin,
  Selection,
  Editor,
  DocumentEditorKeyDownEventArgs,
  SfdtExport,
  WordExport,
  DocumentEditorContainerPlugin,
  DocumentEditorContainerComponent,
  Toolbar
} from "@syncfusion/ej2-vue-documenteditor";

Vue.use(DocumentEditorContainerPlugin);
export default {
  provide: {
    //Inject require modules.
    DocumentEditorContainer: [
      Toolbar,
      SfdtExport,
      Selection,
      Editor,
      WordExport
    ]
  },
  methods: {
    onKeyDown(args) {
      let buttonPress = args.event.which || args.event.keyCode;
      if (buttonPress) {
        args.isHandled = true;
        this.$refs.DocumentEditorContainer.save("sample", "Docx");
        args.event.preventDefault();
      }
    }
  }
};
</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>

```


20 Replies
KB Kurthis Banu Abdul Majeeth Syncfusion Team October 25, 2021 04:42 AM UTC

Hi Adarsh, 

Thanks for contacting Syncfusion support. 

We suspect that the reported issue might be, you didn’t bind the event in documeneditor. So, kindly refer the below code snippet to resolve your reported problem.  

Code snippet:  
mounted ()  
{  
    
  this.$refs.documenteditor.ej2Instances.documentEditor.keyDown = function (args)   
  {  
   // debugger;  
  
    let keyCode = args.event.which || args.event.keyCode;  
  
    let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false);  
  
    let isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false);  
  
    // 83 is the character code for 'S'  
    if (isCtrlKey && !isAltKey && keyCode === 83) {  
        //To prevent default save operation, set the isHandled property to true  
        args.isHandled = true;  
        tthis.$refs.documenteditor.ej2Instances.documentEditor.save('sample', 'Docx');  
        args.event.preventDefault();  
    } else if (isCtrlKey && isAltKey && keyCode === 83) {  
        this.$refs.documenteditor.ej2Instances.documentEditor.save('sample', 'Sfdt');  
    }  
  }  
  
}  

For your reference, we have prepared the sample link in below: 

Documentation Link:  

Also, for your information if you were using DocumentEditorcontainer no need to inject documenteditor.  
DocumentEditorContainer Component is used to create, view, and edit word document. But here, you can use predefined toolbar and properties pane to view and modify word document with Documenteditor.  
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); 

Please let us know if you have any questions.  

Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan October 25, 2021 06:29 AM UTC

I am still not able to convert it into .doc file.


KB Kurthis Banu Abdul Majeeth Syncfusion Team October 25, 2021 11:23 AM UTC

Hi Adarsh,  

Have you have tried this below code snippet?   

Kindly refer the below code snippet and give your container reference instance. 

Code snippet: 
<ejs-documenteditorcontainer ref='documenteditorcontainer' id='container' pageOutline='#E0E0E0' style='width: 100%;height: 590px;' :enableToolbar='true' v-bind:keyDown='onKeyDown'></ejs-documenteditorcontainer> 
 
 
// please give your container reference. 
  this.$refs.documenteditorcontainer.ej2Instances.documentEditor.keyDown = function (args)  
  { 
    //debugger; 
    let keyCode = args.event.which || args.event.keyCode; 
 
    let isCtrlKey = (args.event.ctrlKey || args.event.metaKey) ? true : ((keyCode === 17) ? true : false); 
 
    let isAltKey = args.event.altKey ? args.event.altKey : ((keyCode === 18) ? true : false); 
 
    // 83 is the character code for 'S' 
    if (isCtrlKey && !isAltKey && keyCode === 83) { 
        //To prevent default save operation, set the isHandled property to true 
        args.isHandled = true; 
        this.save('sample', 'Docx'); 
        args.event.preventDefault(); 
    } else if (isCtrlKey && isAltKey && keyCode === 83) { 
        this.save('sample', 'Sfdt'); 
    } 
  } 
 

Vue stack blitz Sample Link: 
(Please find the code change in Line number 1445 – index.js) 

For your reference, we have attached the sample application which we used to reproduce the reported issue and it can be downloaded from the below link.    
 
Vue local sample: 

To run the above sample,     
1.       npm install    
2.       npm run dev    


Please let us if you have still faced any issue. 

Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan October 25, 2021 11:44 AM UTC

Hey there Mr Kurthis,

Thanks so much, I am now able to download the docx and sfdt file. One more doubt which I have is that can we save the docx to a folder in the github repository or into firebase(any database) directly rather than saving it into the local storage?


SM Suriya Murugan Syncfusion Team October 26, 2021 09:19 AM UTC

Hi Adarsh, 

In below kb, we have implemented code to export the document to server and you can customize it based on your requirement. 


Regards, 
Suriya M. 


AN Adarsh Narayanan October 27, 2021 01:12 PM UTC

Hey there team,

I tried to integrate the given code to our previous codebase(Vue-sample-save), but was unsuccessful in saving the document to the server. I think it's because there is another folder structure in the asp net core. Could you guys please help me out and implement the "downloading to server feature" in my codebase?


KB Kurthis Banu Abdul Majeeth Syncfusion Team October 28, 2021 05:56 AM UTC

Hi Adarsh,   

You can achieve your requirement in Document Editor with the help of server-side dependencies (either in Core or MVC).  

Webservice Link: 

Client-side sample: 
https://stackblitz.com/edit/us74xb?file=index.ts (Please find the code change in Line number 29) 

Code snippet: 
  document.getElementById('export').addEventListener('click', () => { 
        let http: XMLHttpRequest = new XMLHttpRequest(); 
 
       // Run the web service  then replace the service URL by running local URL.  
        http.open('POST', 'http://localhost:5000/api/documenteditor/SaveDocument'); 
 
        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); 
        http.responseType = 'json'; 
        //Serialize document content as SFDT. 
        let sfdt: any = { content: container.documentEditor.serialize() }; 
        //Send the sfdt content to server side. 
        http.send(JSON.stringify(sfdt)); 
      }); 
 

Server-side Sample: 

Please check below KB in which you can load and save document in server:   
 
Documentation Link: 

Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan October 29, 2021 11:09 AM UTC

I'm still struggling to integrate it with the previous code (vue-sample-save). Please help me out and do the needful because I have to complete it ASAP.


KB Kurthis Banu Abdul Majeeth Syncfusion Team October 29, 2021 11:20 AM UTC

Hi Adarsh,    

We have prepared Vue sample in below for save the document as Docx in server side. 

Vue client-side Sample: 

Server-side sample: 

Code snippet: 
 //client side 
 
methods:  { 
 
    onSave:function() { 
         let proxy = this; 
        let http = new XMLHttpRequest(); 
 
      // Run the web service  then replace the service URL by running local URL.   
 
        http.open('POST', 'http://localhost:62870/api/documenteditor/SaveDocument'); 
        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); 
        http.responseType = 'json'; 
        //Serialize document content as SFDT. 
        let sfdt = { content:  proxy.$refs.doceditcontainer.ej2Instances.documentEditor.serialize()}; 
        //Send the sfdt content to server side. 
        http.send(JSON.stringify(sfdt)); 
        }, 
 
} 
 
mounted() { 
 
document.getElementById('export').addEventListener('click', this.onSave.bind(this)); 
} 
 
 
 
//server side  
 
       [AcceptVerbs("Post")] 
        [HttpPost] 
        [EnableCors("AllowAllOrigins")] 
        [Route("SaveDocument")] 
        public string SaveDocument([FromBody] SaveParameter data) 
        { 
            Stream document = WordDocument.Save(data.content, FormatType.Docx); 
            FileStream file = new FileStream("sample.docx", FileMode.OpenOrCreate, FileAccess.ReadWrite); 
            document.CopyTo(file); 
            file.Close(); 
            document.Close(); 
 
            return "Sucess"; 
 
        } 


Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan replied to Kurthis Banu Abdul Majeeth November 6, 2021 09:00 PM UTC

Hey there, I'm having trouble compiling with vue-router

Im getting this error - Module build failed: C:/Users/Adarsh Narayanan/vue-web-doc/src/main.js: Duplicate declaration "SaveDoc"

5 | import SeeDoc from "./components/SeeDoc.vue";

6 |

7 | const SaveDoc = { template: "

SaveDoc

" };

| ^

8 | const SeeDoc = { template: "

SeeDoc

" };

9 |

10 | const routes = [


@ multi (webpack)-dev-server/client?http://localhost:8080/ webpack/hot/dev-server ./src/main.js

Here are my vue files - https://www.mediafire.com/file/rj2cv6i2vw7nyul/vue-web-doc.rar/file

Thanks in advance for spending your valuable time for me 🙂


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 8, 2021 07:51 AM UTC

Hi Adarsh,  

We are cross checked your reported issue. Reported duplicate issue might be your declarations. It seems in your code Imported variable and declared variable have same name. 

For your reference we have attached screenshot reference in below. 
  
  
Changing one of the variable name in your code, you can resolve your reported issue. 

Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan November 13, 2021 12:29 PM UTC

Hey team, now I'm getting a new error like this-

/src/main.js
Module not found: Error: Can't resolve './SaveDoc.vue' in 'C:\Users\Adarsh Narayanan\vue-web-doc\src'
 @ ./src/main.js 5:0-36
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Here are the vue 2 files - https://www.mediafire.com/folder/v1fueaustlkzb/vue2-router


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 15, 2021 06:53 AM UTC

Hi Adarsh,  

We suspected the reported issue seems in your application level (module reference). So, could you please check your module reference? 

Please check the below Vue Document editor sample for reference which is running properly: 

Vue client-side Sample:  

Server-side sample:  

Please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan November 16, 2021 06:33 AM UTC

Now I'm getting an error like this!
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/assets/components/SaveDoc.vue Module build failed: SyntaxError: C:/Users/Adarsh Narayanan/vue-web-doc/src/assets/components/SaveDoc.vue: Unexpected token, expected , (74:7) 72 | Vue.use(ButtonPlugin); 73 | [ > 74 | methods: { | ^ 75 | goBack() { 76 | window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/"); 77 | }, @ ./src/assets/components/SaveDoc.vue 8:0-110 9:0-123 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Here are my files - https://www.mediafire.com/folder/ruvp7zg99zq5u/vue2-webdoc


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 17, 2021 06:42 AM UTC

Hi Adarsh,   

We have cross checked your reported problem. Reported issue due to methods declaration without Vue class. 

Please find below screenshot you have been accessing the methods, without Vue class. 

 


For your reference, please find the code structure for simple example in below, 
<template> 
  <div id="app"> 
     <h1>{{ display(message) }}</h1> 
  </div> 
</template> 
 
<script> 
export default { 
  name: 'app', 
  data() { 
    return { 
      message: { 
       value :'Hello World' 
      } 
    }; 
  }, 
 
  methods: { 
     display(message) { 
      return `${message.value}`; 
    } 
  } 
} 
</script> 
 
<style> 
</style> 


Kindly refer the below Vue Document editor sample for reference which is running properly:  

Vue Sample:   

Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan November 18, 2021 04:26 PM UTC

Hey Kurthis,

That error was solved. Now another error has arrised. 

Here is the error:


./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/assets/components/SaveDoc.vue Module build failed: SyntaxError: C:/Users/Adarsh Narayanan/vue-web-doc/src/assets/components/SaveDoc.vue: Unexpected token (230:0) 228 | }; 229 | } > 230 | | ^ @ ./src/assets/components/SaveDoc.vue 8:0-110 9:0-123 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Here are my vue-2 files - https://github.com/adarsh-narayanan8/vue2-savedoc


AN Adarsh Narayanan November 19, 2021 05:45 AM UTC

Hey Mr. Kurthis,

Can you help me out ASAP, because I'm reaching the deadline!


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 19, 2021 06:05 AM UTC

Hi Adarsh,  

It seems reported problem is related to your application module and it’s not due to our sample code. So, kindly check your module error in your side. 

Kindly refer the below Vue Document editor sample for reference which is running properly:   

Vue Sample:   

Please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


AN Adarsh Narayanan November 19, 2021 06:27 AM UTC

Hey Mr. Kurthis,

I want the vue router to Save the Doc and another route to See the Doc.

I was wanting this feature for a long time. What you are giving is just the saving the doc. 

Here are my vue 2 router files - https://github.com/Adarsh88/vue-web-doc

Please do the needful and help me out~


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 22, 2021 07:29 AM UTC

Hi Adarsh,  

We have created an incident for your query under your direct trac account. We have updated the details in that incident. Kindly check that incident for further follow-ups.  

Regards,  
Kurthis Banu A. 


Loader.
Up arrow icon