Document Editing Made Easy: Syncfusion Word Processor + Wisej
Tags: webdev, javascript, wisej
Published: 2022-05-05 12:51:37

---
title: Document Editing Made Easy: Syncfusion Word Processor + Wisej
published: true
date: 2022-05-05 11:35:23 UTC
tags: webdev, javascript, wisej
canonical_url: https://www.syncfusion.com/blogs/post/document-editing-made-easy-syncfusion-word-processor-wisej.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmz16gr140al3j5wo7u3.png
---

A challenge we see while working on modernization projects for desktop applications involves local file access. Web projects have a completely different approach to working with user files that **don’t include unrestricted access** to the client’s file system. Until recently, if you wanted to modify a file on the client’s file system, you had to go through traditional upload and download dialogs, ending up with the same document multiple times in the downloads folder.

With the introduction of Wisej’s [Syncfusion Essential Studio JS](https://docs.wisej.com/extensions/premium-extensions/wisej.web.ext.syncfusion2 "Syncfusion Essential Studio JS integration with Wisej") integration and the [Client File System API](https://docs.wisej.com/extensions/extensions/clientfilesystem "Client File System API integration with Wisej"), working with local user files is a breeze. In this blog post, we show several different ways to integrate Word documents into the [JS 2 Word Processor](https://www.syncfusion.com/javascript-ui-controls/js-word-processor "Syncfusion JavaScript Word Processor") control.

The first approach uses the server’s file system. The second approach shows the integration using Wisej’s [Client File System extension](https://wisej.com/full-control-set/ "Wisej Client File System extension").

## About Wisej

Wisej is a powerful SPA web framework for C# and VB.NET developers. It helps us to migrate existing WinForms, VB6, and Visual Web GUI applications to a modernized, cross-platform solution with minimal code changes. We can easily migrate the existing Syncfusion controls for desktop to their corresponding web-based equivalents without the hassle of entirely rewriting the application. Wisej features a pixel-perfect WYSIWYG designer that helps us to drag and drop controls, assign properties, and attach events with the click of a button. Hot reload and a powerful theming system allows developers to see changes in real-time.

If you’ve never used **Wisej** before, you can get it [here](http://www.wisej.com "Wisej home page").

## Getting started

To use the JS 2 Word Processor in Wisej, we have to add several Syncfusion libraries to the project:

- **Syncfusion.Compression.Base**
- **Syncfusion.DocIO.Base**
- **Syncfusion.EJ2.DocumentEditor**
- **Syncfusion.Licensing**
- **Syncfusion.OfficeChart.Base**

We can easily retrieve these libraries from the [Syncfusion](https://www.syncfusion.com/ "Syncfusion UI controls") website.

**You can download the full demo project** [**here**](https://github.com/LRufenacht/Wisej-Syncfusion-WordProcessor-Demo "Integrating the Syncfusion Word Processor with Wisej and the client file system GitHub demo").

## Retrieving documents on the server

We can fetch documents from the **server’s file system** and show them in the client’s browser using a few simple calls in Wisej.

To get started, load a Word document into a **Stream**.

```js
var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open);
```

Once the file is in a stream, it can be loaded into a **WordDocument(Syncfusion.**EJ2.DocumentEditor.WordDocument) instance:

```js
using (var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open))
{
  var document = WordDocument.Load(stream, FormatType.Docx);
}

```

We can serialize the **WordDocument** instance to get the corresponding **Syncfusion Document Text** (**SFDT)** string.

```js
using (var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open))
{
  var document = WordDocument.Load(stream, FormatType.Docx);
  var sfdt = JsonConvert.SerializeObject(document);
}

```

Once we have the SFDT, we can add a Syncfusion Word Processor (documentEditor in the code) from the Wisej toolbox and load the text into the widget.

**Hint:** If the DocumentEditor control is missing from the Toolbox, you can right-click the toolbox, choose items, and select the Wisej.Web.Ext.Syncfusion2.dll.

```js
using (var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open))
{
  var document = WordDocument.Load(stream, FormatType.Docx);
  var sfdt = JsonConvert.SerializeObject(document);
  this.documentEditor1.OpenFile(sfdt);
}

```

![Design-Time Experience of JS 2 Word Processor in Wisej](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Design-Time-Experience-of-JS-2-Word-Processor-in-Wisej.png)
<figcaption>Design-Time Experience of JS Word Processor in Wisej</figcaption>

![Resulting JS 2 Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Resulting-JS-2-Word-Processor.png)
<figcaption>Resulting JS Word Processor</figcaption>

## Retrieving documents from the client

We can fetch the documents from the client’s file system and show them within the Wisej app  **without a traditional upload dialog**.

To get started, add the **Wisej.Ext.ClientFileSystem** extension to the project.

After adding the extension, the Wisej application can access directories on the local file system through the browser’s [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API "File System Access API documentation").

It is important to note that read and write permissions must be granted for **each directory** (unless a member of the directory’s upper hierarchy has already approved access). File access is **revoked** upon a **page refresh,** so it is important to request access again.

```js
// get a directory from the client. 
var directoryHandle = await ClientFileSystem.ShowDirectoryPickerAsync();   

// get the files from that directory. 
var fileHandles = await directoryHandle.GetFilesAsync("*.docx");
```

After retrieving the files, the contents of a file can be queried.

```js
// get a directory from the client. 
var directoryHandle = await ClientFileSystem.ShowDirectoryPickerAsync();   

// get the files from that directory. 
var fileHandles = await directoryHandle.GetFilesAsync("*.docx"); 
if (fileHandles.Length &gt; 0) 
{ 
   // load the first Word document. 
   var fileHandle = fileHandles[0];
  // save a reference to the file if using it later. 
  this.selectedFileHandle = fileHandle;   

  // query read and write permissions on the file. 
  var state = await fileHandle.QueryPermissionAsync(Permission.ReadWrite); 
  if (state == PermissionState.Granted) 
  { 
     // read and load the file. 
     var bytes = await fileHandle.ReadBytesAsync(); 
  } 
}
```

The rest is the same as the server-side file loading.

```js
// get a directory from the client. 
var directoryHandle = await ClientFileSystem.ShowDirectoryPickerAsync();   

// get the files from that directory. 
var fileHandles = await directoryHandle.GetFilesAsync("*.docx"); 
if (fileHandles.Length &gt; 0) 
{ 
  // load the first Word document. 
  var fileHandle = fileHandles[0];   

  // query read and write permissions on the file. 
  var state = await fileHandle.QueryPermissionAsync(Permission.ReadWrite); 
  if (state == PermissionState.Granted) 
  { 
    var bytes = await fileHandle.ReadBytesAsync(); 
    using (var stream = new MemoryStream(bytes)) 
    { 
      var document = WordDocument.Load(stream, FormatType.Docx); 
      var sfdt = JsonConvert.SerializeObject(document);   
  
      this.documentEditor1.OpenFile(sfdt); 
    } 
  } 
}
```

## Saving documents

The documents have been loaded into the client-side viewer, we can now save the documents back to the server or to the client.

To retrieve the document stream from the client, simply use the following.

```js
var document = await this.documentEditor1.GetDocumentAsync();

```

### Saving server-side documents

To save a document to a server location, simply use **System.IO.File.WriteAllBytes().**

```js
System.IO.File.WriteAllBytes(Application.MapPath("path/to/file.docx"), document.ToArray());
```

### Saving client-side documents

To save the document to a client-side location, use the reference from the client-side file handle.

```js
this.selectedFileHandle.WriteBytesAsync(document.ToArray(), 0, WritableType.Write, false);
```

## Opening client-side documents using Word

When using the client’s file system to load documents into the viewer, documents can be opened **directly in Word**  **from a Wisej application**.

Microsoft Office includes a **custom data scheme (ms-word://)** that provides functionality to open a file path in Word from the browser. You can learn more about it [here](https://docs.microsoft.com/en-us/office/client-developer/office-uri-schemes "Microsoft Office URI Schemes documentation").

As an example, we can directly open a client-side file located at **F:/Play/Test.docx**  from a Wisej application using **Application.Navigate()**.

_Keep in mind the full path of the directory must be known to the Wisej application and the path cannot contain spaces._

```js
Application.Navigate("ms-word:ofe|u|F:/Play/Test.docx");
```

Also, you can get the demo project from GitHub [here](https://github.com/LRufenacht/Wisej-Syncfusion-WordProcessor-Demo "Integrating Syncfusion Word Processor with Wisej GitHub demo"). I hope this blog has been helpful to you. Thank you for reading.

## Related blogs

- [Migrate Windows Desktop Applications to the Web with Syncfusion + Wisej](https://dev.to/syncfusion/migrate-windows-desktop-applications-to-the-web-with-syncfusion-wisej-4o16 "Blog: Migrate Windows Desktop Applications to the Web with Syncfusion + Wisej")
- [Easily Configure Syncfusion JavaScript UI Controls in Salesforce](https://dev.to/syncfusion/easily-configure-syncfusion-javascript-ui-controls-in-salesforce-4o32 "Blog: Easily Configure Syncfusion JavaScript UI Controls in Salesforce")
- [Introducing the JavaScript Signature Pad Control in Essential JS 2](https://dev.to/sureshmohan/introducing-the-javascript-signature-pad-control-in-essential-js-2-6in-temp-slug-1643921 "Blog: Introducing the JavaScript Signature Pad Control in Essential JS 2")