Skip to main content

Document Viewer Integration in Vue Application

  • 2 minutes to read

Note

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

The server-side model stores reports that can be rendered in the HTML5 Document Viewer integrated in the Vue JavaScript application.

This project consists of the following server and client parts:

Server (Back-End) Application

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

Client (Front-End) Application

Create a folder to store application files. Use the command prompt and perform the following steps to create and configure the client part:

  1. Ensure you have the current Node.js versions with NPM installed on your machine.

    node -v
    npm -v
    
  2. Install the Vue CLI (command line interface tool) globally:

    npm install -g @vue/cli
    
  3. Create a Vue application with a default preset and navigate to the created folder:

    vue create vue-report-viewer
    
    cd vue-report-viewer
    
  4. Install DevExpress packages:

    npm install devextreme @devexpress/analytics-core devexpress-reporting
    
  5. Create the src/components/WebDocumentViewer.vue file with the following content:

    <template>
    <div ref="viewer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0" data-bind="dxReportViewer: $data"></div>
    </template>
    
    <script>
    import ko from "knockout";
    import 'devexpress-reporting/dx-webdocumentviewer';
    
    export default {
    name: "WebDocumentViewer",
    mounted() {
        var viewerOptions = {
            reportUrl: ko.observable("Products"), // The URL of a report.
            requestOptions: {
            host: "https://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"
            }
        };
        ko.applyBindings(viewerOptions, this.$refs.viewer);
    },
    beforeDestroy() {
        ko.cleanNode(this.$refs.viewer);
    }
    };
    </script>
    

    Important

    In the code above, set the host port number to your back-end application’s server port number.

  6. Open the src/App.vue file and replace its content with the following code to display the Web Document Viewer component on the page:

    <template>
    <div>
        <WebDocumentViewer />
    </div>
    </template>
    
    <script>
    import WebDocumentViewer from './components/WebDocumentViewer';
    
    export default {
    name: 'app',
    components: {
        WebDocumentViewer
    }
    }
    </script>
    
  7. Add styles to the file src/main.js:

    import "jquery-ui/themes/base/all.css";
    import "devextreme/dist/css/dx.light.css";
    import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
    import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
    import "devexpress-reporting/dist/css/dx-webdocumentviewer.css";
    
  8. Run the application:

    npm run serve
    
  9. Open the http://localhost:8080/ location in browser to see the test report.