<template>
<div id="app">
<ejs-documenteditorcontainer ref="container" height="900px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
</div>
</template>
<script>
import Vue from 'vue';
import {
DocumentEditorContainerPlugin,
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-vue-documenteditor';
Vue.use(DocumentEditorContainerPlugin);
export default {
data: function() {
return {
};
},
mounted: function() {
var dataContext = this;
var uploadDocument = new FormData();
uploadDocument.append('DocumentName', 'app/Data/Getting Started.docx');
var baseUrl = 'http://localhost:6002/api/documenteditor/LoadDocument';
var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', baseUrl, true);
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200 || httpRequest.status === 304) {
//Open the document in DocumentEditor
this.$refs.container.ej2Instances.open(httpRequest.responseText);
}
}
};
httpRequest.send(uploadDocument);
}
}
</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>