Create a Vue Front-End Application with a Document Viewer
- 4 minutes to read
The Web Document Viewer is used in applications that contain client and server parts:
- Client
- A Web Document Viewer integrated in a client Vue application displays a report provided by the server-side model.
- Server
- The server is an ASP.NET Core application that handles client data requests and provides access to data sources, report storage, and other back-end capabilities.
This tutorial creates and configures a client React application and a server ASP.NET Core backend. The client contains the Web Document Viewer control.
Prerequisites
- Node.js v18.3 or later
- .NET 8 SDK or later
Note the following details about package versions:
- The script version on the client should match the library version on the server.
- DevExpress npm package versions should be identical.
Server (Back-End) Application
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:
Install DevExpress ASP.NET Core project templates from nuget.org:
dotnet new install DevExpress.AspNetCore.ProjectTemplates
Create a back-end Reporting application for a Document Viewer:
dotnet new dx.aspnetcore.reporting.backend -n ServerApp --add-designer false
You can use the following parameters to see available command options:
-? | -h | --help
.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.
Call the UseCors method and pass the policy name as a parameter. The
UseCors
method should be called after theUseRouting
method and before any MVC-related code. Place theUseCors
method before theUseMvc
orUseEndpoints
methods.Open the application startup file and insert the following code:
var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(options => { options.AddPolicy("AllowCorsPolicy", builder => { // Allow all ports on local host. builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost"); builder.AllowAnyHeader(); builder.AllowAnyMethod(); }); }); var app = builder.Build(); app.UseRouting(); app.UseCors("AllowCorsPolicy"); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); }); app.Run();
To run the server-side application, run the following command:
cd ServerApp dotnet run
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 (Front-End) Application
Create a Vue application with the default preset:
npm create vue@latest vue-document-viewer
Navigate to the project folder and install DevExpress npm packages:
cd vue-document-viewer npm install devextreme@24.2-stable @devexpress/analytics-core@24.2-stable devexpress-reporting@24.2-stable
Create a src/App.vue file with the following content:
<template> <div ref="viewer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"></div> </template> <script> import 'devexpress-reporting/dx-webdocumentviewer'; import {DxReportViewer} from 'devexpress-reporting/dx-webdocumentviewer'; import * as ko from 'knockout'; export default { name: "WebDocumentViewer", mounted() { const reportUrl = ko.observable("TestReport"); const viewerRef = this.$refs.viewer; const requestOptions = { host: " http://localhost:5000/", invokeAction: "DXXRDV" }; const viewer = new DxReportViewer(viewerRef, { reportUrl, requestOptions }); viewer.render(); }, beforeUnmount() { ko.cleanNode(this.$refs.viewer); } }; </script>
Add styles to the src/main.js file:
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"; import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
Remove default project styles to avoid conflicts. To do this, remove the ./assets/main.css import in the main.js file.
Run the Project
Run the server application.
Make sure to specify the correct server-side port (5000 in this example) and report name (TestReport in this example) in the Viewer.vue file.
Run the client application:
npm run dev
Open your browser and navigate to the URL specified in the command output to see the result.
Troubleshooting
When you start the application, you may encounter the following issues:
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.