How to Open a Document by URL in Vue DOCX Editor

28 Aug 20266 minutes to read

How to open a document from URL in DocumentEditor

In this article, we are going to see how to open a document from URL in Vue DOCX Editor (Document Editor)

Please refer to the example below for the client-side code.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <button id='import' v-on:click="onClick">Import</button>
    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' 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://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

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

const onClick = function () {
  let http = new XMLHttpRequest();
  //add your URL from which you want to open the document inside the ""
  let content = { fileUrl: "" };
  let baseurl = "/api/documenteditor/ImportFileURL";
  http.open("POST", baseurl, true);
  http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  http.onreadystatechange = () => {
    if (http.readyState === 4) {
      if (http.status === 200 || http.status === 304) {
        //open the SFDT text in Document Editor
        container.value.ej2Instances.documentEditor.open(http.responseText);
      }
    }
  };
  http.send(JSON.stringify(content));
}

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <button id='import' v-on:click="onClick">Import</button>
    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' 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://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
    };
  },
  provide: {
    //Inject require modules.
    DocumentEditorContainer: [Toolbar]
  },
  methods: {
    onClick: function () {
      let http = new XMLHttpRequest();
      //add your URL from which you want to open the document inside the ""
      let content = { fileUrl: "" };
      let baseurl = "/api/documenteditor/ImportFileURL";
      http.open("POST", baseurl, true);
      http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      http.onreadystatechange = () => {
        if (http.readyState === 4) {
          if (http.status === 200 || http.status === 304) {
            //open the SFDT text in Document Editor
            this.$refs.container.ej2Instances.documentEditor.open(http.responseText);
          }
        }
      };
      http.send(JSON.stringify(content));
    }
  }
};
</script>

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

Please refer to the example below for the server-side code.

    [AcceptVerbs("Post")]
    public string ImportFileURL([FromBody]FileUrlInfo param)
    {
        try {
            using(WebClient client = new WebClient())
            {
                MemoryStream stream = new MemoryStream(client.DownloadData(param.fileUrl));
                WordDocument document = WordDocument.Load(stream, FormatType.Docx);
                string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
                document.Dispose();
                stream.Dispose();
                return json;
            }
        }
        catch (Exception) {
            return "";
        }
    }
    public class FileUrlInfo {
        public string fileUrl { get; set; }
        public string Content { get; set; }
    }