How to view Word document in browser using JavaScript

5 mins read

Overview

This article explains how to view a Word document in browser using JavaScript with Essential JS 2 JavaScript Word Processor component that have editing capabilities like Microsoft Word. It is also known as document editor, and used to create, edit, view, and print the Word documents. It provides all the common Word processing features including editing text, formatting contents, resizing image 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 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 in the ej2-quickstart folder. Run the following command line one by one to navigate to ej2-quickstart folder and install the required npm dependent 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 line “npm install” will install all required Syncfusion JavaScript packages in 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!

Did you find this information helpful?

Yes

Comments (0)