Document Viewer Integration

  • 2 minutes to read
NOTE

The complete sample project How to use the Document Viewer in JavaScript with React Framework is available in the DevExpress Examples repository.

The server-side model stores a report and provides it to the HTML5 Document Viewer integrated in the client React JavaScript application.

The project consists of the server and client parts.

Server (Back-End) Application

Refer to the following topics to create a back-end application:

Client (Front-End) Application

  1. Create a folder (JS in our example) to store application files. Launch the command prompt to perform the following steps to create and configure the client part.

  2. Create a new React application in the react-document-viewer folder:

    npx create-react-app react-document-viewer
    
  3. Switch to the root application folder:

    cd react-document-viewer
    
  4. Install DevExpress packages:

    npm install devextreme devexpress-reporting @devexpress/analytics-core
    
  5. Open the App.js file in the src folder (JS\react-document-viewer\src) and substitute its content with the following code:

    import React from 'react';
    import ko from 'knockout';
    import 'devexpress-reporting/dx-webdocumentviewer';
    import './App.css';
    
    class ReportViewer extends React.Component {
    constructor(props) {
        super(props);
        this.reportUrl = ko.observable("TestReport");
        this.requestOptions = {
        host: "http://localhost:54114/",
        // Use this line for the ASP.NET MVC backend.
        //invokeAction: "/WebDocumentViewer/Invoke"
        // Use this line for the ASP.NET Core backend
        invokeAction: "DXXRDV"
        };
    }
    render() {
        return (<div ref="viewer" data-bind="dxReportViewer: $data"></div>);
    }
    componentDidMount() {
        ko.applyBindings({
        reportUrl: this.reportUrl,
        requestOptions: this.requestOptions
        }, this.refs.viewer);
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.viewer);
    }
    };
    
    function App() {
    return (<div style={{ width: "100%", height: "1000px" }}>
        <ReportViewer />
    </div>);
    }
    
    export default App;
    

    The code declares the ReportViewer component and returns it with the App function.

    IMPORTANT

    You can modify the App.js content to specify the correct server-side port (54114 in this example) and report name (Products in this example).

  6. Open the App.css file in the src folder (JS\react-report-designer\src) and append the following style sheet references:

    /* ... */
    @import url("../node_modules/jquery-ui/themes/base/all.css");
    @import url("../node_modules/devextreme/dist/css/dx.common.css");
    @import url("../node_modules/devextreme/dist/css/dx.light.css");
    @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
    @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
    @import url("../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");
    
  7. Run the server (back-end) application.

  8. Navigate to the client application's root folder (JS\react-document-viewer), open the command prompt, and run the client application:

    npm start
    

    The client application opens the browser at http://localhost:3000/. It displays the Document Viewer with the TestReport report.