How to View Word Document with Browser in JavaScript DocumentEditor?

7 mins read

Overview

This article explains how to view a Word document in a browser using JavaScript with the Essential® JS 2 JavaScript Word Processor component, which has editing capabilities similar to Microsoft Word. It is also known as a document editor and is used to create, edit, view, and print Word documents. It provides all the common Word processing features, including editing text, formatting content, resizing images and tables, finding and replacing text, bookmarks, tables of contents, printing, and importing and exporting Word documents.

Prerequisites

Before getting started, the following items are required to create a JavaScript Word Processor application:

Installation and Configuration

Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quick start project from GitHub.
```
git clone https://github.com/syncfusion/ej2-quickstart.git ej2-quickstart
```

The application is cloned into the `ej2-quickstart` folder. Run the following command lines one by one to navigate to the `ej2-quickstart` folder and install the required npm dependency packages from the command prompt.
```
cd ej2-quickstart
npm install 
```

Note:

The quickstart application preconfigures the dependent `@syncfusion/ej2` package in the `~/package.json` file. So, running the command `npm install` will install all the required Syncfusion® JavaScript packages in the application.

Configure JavaScript Word Processor control in application

The JavaScript Word Processor packages must be mapped in the system.config.js configuration file.

System.config({
    paths: {
        'syncfusion:': './node_modules/@syncfusion/',
    },
    map: {
        app: 'app',
 
        //Syncfusion® packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
        "@syncfusion/ej2-office-chart": "syncfusion:ej2-office-chart/dist/ej2-office-chart.umd.min.js",
        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
        "@syncfusion/ej2-documenteditor": "syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js"
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});
 
System.import('app');

Adding CSS Reference

Combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in src/styles/styles.css using the following code.

@import '../../node_modules/@syncfusion/ej2/material.css';

Adding Component

Add the DocumentEditorContainer component to app.ts and index.html files using the following code.

Place the following code in the app.ts

import { DocumentEditorContainer,Toolbar } from '@syncfusion/ej2-documenteditor';
 
DocumentEditorContainer.Inject(Toolbar);
let documenteditor: DocumentEditorContainer = new DocumentEditorContainer();
documenteditor.appendTo('#DocumentEditor');

Now, add an HTML div element to act as the DocumentEditorContainer element to the index.html using following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Essential® JS 2 - Document Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential® JS 2" />
    <meta name="author" content="Syncfusion®" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
 
    <!--style reference from app-->
    <link href="/styles/styles.css" rel="stylesheet" />
 
    <!--system js reference and configuration-->
    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="system.config.js" type="text/javascript"></script>
</head>
<body>
    <!--Element which will render as DocumentEditor -->
    <div id="DocumentEditor" style="height: 700px;"></div>
</body>
</html>

Run the Application

Use the following command to compile and run the application in browser.

npm start

Application will serve in the browser as follows.

JavaScript Word Processor

Server-side dependency

The JavaScript WordProcessor requires server-side interaction to open Word documents, spell check, paste with formatting, restrict editing operations. The same can be written in ASP.NET MVC or ASP.NET Core using the following NuGets. In this GitHub repository, the server-side Web API is committed.

Summary

In this GitHub repository, the application prepared from the previous steps has been committed, and it is readily runnable. Also, you can check Syncfusion® JavaScript WordProcessor a.k.a DocumentEditor features in this page.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through Syncfusion® Support forum or Direct-Trac. We are happy to assist you!

Conclusion

I hope you enjoyed learning how to view a Word document in a browser using the JavaScript DocumentEditor.

You can refer to our JavaScript DocumentEditor feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our JavaScript DocumentEditor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)