Create a Document Viewer in an Angular Front-End Application with DevExpress

We are learning in this tutorial How To Create a Document Viewer in an Angular Front-End Application.

let’s start a tutorial, The creation of a Reporting application using the Angular client portion is covered in this paper.

The project consists of the server and client parts.

Client (Front-End) Application

Perform the following steps to create and configure the client part:

  1. Ensure that npm is installed on your computer along with the most recent version of Node.js.
    1. node -v
      npm -v
  2. The Angular CLI may be installed globally by opening the terminal window.
    1. npm install -g @angular/cli
  3. To house client files, make a new folder. Run the command to start a new project after navigating to the newly created folder:
    1. ng new angular-example --strict=false
  4. Go to the application root folder and open the package.json configuration file. Include the subsequent packages:
    1. "dependencies": {
        ...
        "devextreme": "22.1.*",
        "@devexpress/analytics-core": "22.1.*",
        "devexpress-reporting-angular": "22.1.*",
        "bootstrap": "^4.3.1",
        "core-js": "^3.4.3",
        ...
      },

      NOTE:-

      The same version of DevExpress controls should be used in both front-end and back-end applications.

  5. Install the packages by navigating to the project’s root folder:
    1. cd angular-example
      npm install

      Installed libraries are copied to the node_modules folder.

  6. The following code should be added to the angular-demoapp.module.ts file instead of the existing content:
    1. import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      
      import { AppComponent } from './app.component';
      import { DxReportViewerModule } from 'devexpress-reporting-angular';
      
      @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxReportViewerModule
      ],
      providers: [],
      bootstrap: [AppComponent]
      })
      export class AppModule { }
  7. The following code adds the dx-report-viewer Angular component and should be substituted for the contents of theangular-demoapp.component.html file:
    1. <dx-report-viewer [reportUrl]="reportUrl" height="800px">
      <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
      </dx-report-viewer>
  8. The following code should be added to the angular-demoapp.component.ts file instead of the existing content:
    1. import { Component, ViewEncapsulation } from '@angular/core';
      
      @Component({
      selector: 'app-root',
      encapsulation: ViewEncapsulation.None,
      templateUrl: './app.component.html',
      styleUrls: [
          "../../node_modules/jquery-ui/themes/base/all.css",
          "../../node_modules/devextreme/dist/css/dx.light.css",
          "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
          "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
          "../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
      ]
      })
      export class AppComponent {
      title = 'DXReportViewerSample';
      reportUrl: string = 'Products';
      hostUrl: string = 'https://localhost:54114/';
      // Use this line if you use an ASP.NET MVC backend
      //invokeAction: string = "/WebDocumentViewer/Invoke";
      // Use this line if you use an ASP.NET Core backend
      invokeAction: string = 'DXXRDV';
      }

      reportUrl
      a report’s unique identification string. The server-side report name resolution services get this string as input. You can develop a ReportStorageWebExtension or an IReportProvider descendent and register it as a custom report name resolution service in your back-end application. Review the following help topic for further details: In an ASP.NET Core application, open a report.
      invokeAction
      specifies a route to the controller in your back-end application that deals with requests. When the methods AddDevExpressControls and UseDevExpressControls in the Startup.cs file are called, an internal MVC controller with the DXXRDV route is added to the back-end application. You may create a descendent of WebDocumentViewerController and register it as a controller for a certain route. Review the ASP.NET help topic to learn more about the code example

      hostUrl
      The URL of the back-end application.
      Examine the following help topic for further details on component options: Client-Side Configuration of the Document Viewer in the Angular Application.

  9. Activate the server-side project.
  10. To create and serve the application, use the command below. You ought to
    1. ng serve
  11. Open the http://localhost:4200/ location in the browser to see the test report.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories