You can open and save a Word document that is available in the web server by using the Document Editor control.
CSHTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> <link href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet"> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> </head> <body> <div class="container body-content"> <div> <div> <div style=" margin-bottom:12px"> @Html.EJS().DropDownButton("fileBtn").Content("Documents").Select("onSelect").Items(ViewBag.filePathInfo).Render() @Html.EJS().Button("savebtn").Content("Save Document").IsPrimary(false).Render() </div> <div style="display:block;width:100%;height:500px"> @Html.EJS().DocumentEditorContainer("container").ServiceUrl("/api/DocumentEditor/Import").EnableToolbar(true).Created("onCreated").Render() </div> </div> </div> </div> @RenderSection("scripts", required: false) @Html.EJS().ScriptManager() </body> </html>
JS <script> document.getElementById("savebtn").addEventListener('click', function () { saveDocument() }); var documenteditor; function onCreated() { var container = document.getElementById("container").ej2_instances[0]; documenteditor = container.documentEditor; documenteditor.resize(); } function onSelect(args) { console.log(args); var fileName = args.item.text; var httpRequest = new XMLHttpRequest(); httpRequest.open('Post', '/api/DocumentEditor/Import?fileName=' + fileName, true); httpRequest.onreadystatechange = function () { if (httpRequest.readyState === 4) { if (httpRequest.status === 200 || httpRequest.status === 304) { documenteditor.open(httpRequest.responseText); } else { alert('Fail to load the document'); } } }; documenteditor.documentName = fileName.substr(0, fileName.lastIndexOf('.')); httpRequest.send(); } function saveDocument() { documenteditor.saveAsBlob("Docx").then(function (blob) { var fileReader = new FileReader(); fileReader.onload = function () { var documentData = { fileName: documenteditor.documentName + '.docx', documentData: fileReader.result } var httpRequest = new XMLHttpRequest(); httpRequest.open('Post', '/api/DocumentEditor/Save', true); httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); httpRequest.onreadystatechange = function () { if (httpRequest.readyState === 4) { if (httpRequest.status === 200 || httpRequest.status === 304) { //Sucess } } }; httpRequest.send(JSON.stringify(documentData)); }; fileReader.readAsDataURL(blob); }); } </script>
Controller public class HomeController : Controller { public ActionResult Index() { ViewBag.filePathInfo = GetFilesInfo(); return View(); } public List<FilesPathInfo> GetFilesInfo() { string path = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/"); return ExplorFiles(path); } // GET: FileExplorer public List<FilesPathInfo> ExplorFiles(string fileDirectory) { List<FilesPathInfo> filesInfo = new List<FilesPathInfo>(); try { foreach (string f in Directory.GetFiles(fileDirectory)) { FilesPathInfo path = new FilesPathInfo(); path.text = Path.GetFileName(f); filesInfo.Add(path); } } catch (System.Exception e) { throw new Exception("error", e); } return filesInfo; } }
WEB API Controller [HttpPost] public HttpResponseMessage Import(string fileName) { string path = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/"); path += fileName; if (!File.Exists(path)) return null; Stream stream = File.OpenRead(path); WordDocument document = WordDocument.Load(stream, Syncfusion.EJ2.DocumentEditor.FormatType.Docx); string json = Newtonsoft.Json.JsonConvert.SerializeObject(document); // Releases unmanaged and optionally managed resources. document.Dispose(); stream.Close(); return new HttpResponseMessage() { Content = new StringContent(json, Encoding.UTF8, "text/plain") }; } [HttpPost] public string Save([FromBody]ExportData exportData) { Byte[] data = Convert.FromBase64String(exportData.documentData.Split(',')[1]); MemoryStream stream = new MemoryStream(); stream.Write(data, 0, data.Length); Syncfusion.EJ2.DocumentEditor.FormatType type = GetFormatType(exportData.fileName); stream.Position = 0; try { string path = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/"); FileStream fileStream = new FileStream(path + exportData.fileName, FileMode.OpenOrCreate, FileAccess.ReadWrite); fileStream.Position = 0; if (type != Syncfusion.EJ2.DocumentEditor.FormatType.Docx) { Syncfusion.DocIO.DLS.WordDocument document = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Docx); document.Save(fileStream, GetDocIOFomatType(type)); document.Close(); } else { stream.CopyTo(fileStream); } fileStream.Close(); stream.Dispose(); return "Success"; } catch { return "Failed"; } } internal static Syncfusion.EJ2.DocumentEditor.FormatType GetFormatType(string fileName) { int index = fileName.LastIndexOf('.'); string format = index > -1 && index < fileName.Length - 1 ? fileName.Substring(index + 1) : ""; if (string.IsNullOrEmpty(format)) throw new NotSupportedException("EJ2 DocumentEditor does not support this file format."); switch (format.ToLower()) { case "dotx": case "docx": case "docm": case "dotm": return Syncfusion.EJ2.DocumentEditor.FormatType.Docx; case "dot": case "doc": return Syncfusion.EJ2.DocumentEditor.FormatType.Doc; case "rtf": return Syncfusion.EJ2.DocumentEditor.FormatType.Rtf; case "txt": return Syncfusion.EJ2.DocumentEditor.FormatType.Txt; case "xml": return Syncfusion.EJ2.DocumentEditor.FormatType.WordML; default: throw new NotSupportedException("EJ2 DocumentEditor does not support this file format."); } } internal static Syncfusion.DocIO.FormatType GetDocIOFomatType(Syncfusion.EJ2.DocumentEditor.FormatType type) { switch (type) { case Syncfusion.EJ2.DocumentEditor.FormatType.Docx: return Syncfusion.DocIO.FormatType.Docx; case Syncfusion.EJ2.DocumentEditor.FormatType.Doc: return Syncfusion.DocIO.FormatType.Doc; case Syncfusion.EJ2.DocumentEditor.FormatType.Rtf: return Syncfusion.DocIO.FormatType.Rtf; case Syncfusion.EJ2.DocumentEditor.FormatType.Txt: return Syncfusion.DocIO.FormatType.Txt; case Syncfusion.EJ2.DocumentEditor.FormatType.WordML: return Syncfusion.DocIO.FormatType.WordML; default: throw new NotSupportedException("DocIO does not support this file format."); } }
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/LoadAndSaveFromServer-1439153959
In the previous sample, a dropdown button has been added, which shows a list of files available in ‘App_Data’ in the web server. A document will be opened in the Document Editor control by selecting it. |
This page will automatically be redirected to the sign-in page in 10 seconds.