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:
- Document Viewer Server-Side Application (ASP.NET MVC)
- Document Viewer Server-Side Application (ASP.NET Core)
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:
Ensure you have the current Node.js versions with NPM installed on your machine.
node -v npm -v
Install the Vue CLI (command line interface tool) globally:
npm install -g @vue/cli
Create a Vue application with a default preset and navigate to the created folder:
vue create vue-report-viewer
cd vue-report-viewer
Install DevExpress packages:
npm install devextreme @devexpress/analytics-core devexpress-reporting
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.
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>
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";
Run the application:
npm run serve
- Open the http://localhost:8080/ location in browser to see the test report.