All docs
V20.2
21.1 (EAP/Beta)
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.common.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.