Document Viewer Integration (npm or Yarn Package Managers)

• May 27, 2025
• 5 minutes to read

You can use the HTML5 Document Viewer in a JavaScript application. You should create two projects:

• A server (backend) project that enables Cross-Origin Resource Sharing and retrieves a report from the storage
• A client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

View Example

Server (Backend) Part

Use the DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. Begin with the steps below:

1. Install DevExpress ASP.NET Core project templates from nuget.org:

2. Create a back-end Reporting application for a Document Viewer:

3. Enable cross-origin requests (CORS). Specify the policy that allows any local application to access the report’s back-end. Use the SetIsOriginAllowed method to set it up.

4. To run the server-side application, run the following command:

Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in Visual Studio, review the following help topics:

• Document Viewer Server-Side Application (ASP.NET Core)
• Document Viewer’s Server-Side Configuration (ASP.NET MVC)

Client (Frontend) Part

The following steps configure and host the client part:

1. Create a new folder to store the client-side files (ClientSide in this example).

2. Create a package.json file in the ClientSide folder with the following content:

3. Ensure that you have npm or Yarn package managers installed.

4. Navigate to the client application root folder (ClientSide) and run the command in the command prompt:

5. Create an index.html file. It is the View file in our model. Copy the following HTML code and insert it in this file:

6. Create a example.js file to provide data to the View. The JavaScript code in this file creates a viewerOptions variable. Copy the following code and insert it in the example.js file:

7. Modify the index.html file to specify the HTML template that uses the Document Viewer’s binding with the viewerOptions parameter. Add the following code to the body section:

8. Host the client-side part on the web server. Start the Internet Information Services (IIS) Manager, right-click the Sites item in the Connections section, and select Add Website. In the invoked dialog, specify the site name, path to the client-side application root folder, and the website’s IP address and port.

9. Run the backend project.

10. Open the website created in step 8, in the browser. In this example, the address is http://localhost:1000.

Troubleshooting

You may encounter the following problems:

Page Is Blank

The Document Viewer page is blank. The following error message is displayed at the bottom of the page:

Could not open report ‘TestReport’

Check the following:

• The backend application is up and running.
• The backend application runs on the port specified in the host setting of the Document Viewer component.
• The application’s URI is compliant with the CORS policy specified in your back-end application.
• The reportUrl setting value matches an existing report. For the backend application, ensure that either the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the back-end application originated from the DevExpress template).
• The version of DevExpress npm packages should match the version of NuGet packages. Enable Development Mode to check for a library version mismatch on every request to the server. For details, review the following help topic: Server-Side Libraries Version.

Refer to the following topic for more information: Troubleshooting.