Document Viewer Integration in Vue Application

• Dec 04, 2024
• 4 minutes to read

View Example: How to use the Web Document Viewer in JavaScript with Vue

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

Use DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. To do this, follow the steps below:

1. Install DevExpress ASP.NET Core project templates from nuget.org:

   .NET CLI

   dotnet new install DevExpress.AspNetCore.ProjectTemplates
   

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

3. 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 the UseRouting method and before any MVC-related code. Place the UseCors method before the UseMvc or UseEndpoints methods.

   Open the application startup file and insert the following code:

   Program.cs

   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();
   

Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in the 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 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:

   WebDocumentViewer.vue

   <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: " https://localhost:53578/",
           invokeAction: "DXXRDV"
         };
         const viewer = new DxReportViewer(viewerRef, {
           reportUrl,
           requestOptions
         });
         viewer.render();
       },
       beforeUnmount() {
         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 (54114 in this example).

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:

   App.vue

   <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:

   main.js

   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.

Troubleshooting

When you start the application, you may encounter the following problems:

Page is blank

The Document Viewer page is blank. The following error message is displayed at the bottom of the page: The page is blank because the Document Viewer failed to load the report. Consult the developer for assistance. Use development mode for detailed information. If the page does not display the Document Viewer, press F12 to invoke DevTools and inspect the console messages.

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 satisfies the CORS policy specified in your backend application.
• The reportName value matches an existing report. For the backend application it means that the Reports folder contains the reportName.repx file or the ReportsFactory.Reports dictionary contains the reportName entry (if backend application originated from the DevExpress template).
• The version of the DevExpress scripts (npm packages) should match the version of the server-side libraries (NuGet packages). You can enable Development Mode to check for library version mismatch on every request to the server. For more information, review the following help topic: Server-Side Libraries Version.

Review the following help topic for more information: Troubleshooting.