WebDocumentViewerClientSideEventsBuilder.OnExport(String) Method

Specifies the JavaScript function that handles the OnExport event, which occurs before a request for document export is sent.

Namespace: DevExpress.AspNetCore.Reporting.WebDocumentViewer

Assembly: DevExpress.AspNetCore.Reporting.v21.1.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public WebDocumentViewerClientSideEventsBuilder OnExport(
    string callback
)

VB.NET

Public Function OnExport(
    callback As String
) As WebDocumentViewerClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or entire JavaScript function code that runs when the OnExport event occurs.

Returns

Type	Description
WebDocumentViewerClientSideEventsBuilder	A WebDocumentViewerClientSideEventsBuilder object instance that can be used for method chaining.

Remarks

The OnExport event occurs before the Document Viewer sends a request to print the document or to get the exported document.

The Document Viewer request that gets the exported document and the request to print the document are GET requests. If your application uses token-based authentication, handle the OnExport event to pass a token to the server when these requests are executed.

The handler function receives two parameters - the first parameter is the client-side DocumentViewer object, the second parameter is the object with the following properties:

RequestUrl

A string that specifies the request URL.

FormData

A set of key-value pairs.

Example

View Example: ASP.NET Core Reporting - Best Practices

The following code handles the OnExport event on the client to pass the Bearer token to the server with a request for print or export:

Angular

  report-viewer.html

<dx-report-viewer [reportUrl]="reportUrl" height="800px">
  <dxrv-callbacks (OnExport)="viewerOnExport($event)"></dxrv-callbacks>
  <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
</dx-report-viewer>

 

report-viewer.ts

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ajaxSetup } from '@devexpress/analytics-core/analytics-utils';
import * as ko from 'knockout';
import { AuthorizeService } from '../../api-authorization/authorize.service';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.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 ReportViewerComponent implements OnInit {
  get reportUrl() {
    return this.koReportUrl();
  };
  set reportUrl(newUrl) {
    this.koReportUrl(newUrl);
  }
  koReportUrl = ko.observable('');
  invokeAction: string = '/DXXRDVAngular';

  exportAccesstoken: string;

  constructor(@Inject('BASE_URL') public hostUrl: string, private authorize: AuthorizeService, private activateRoute: ActivatedRoute) {
    this.authorize.getAccessToken()
      .subscribe(x => {
        ajaxSetup.ajaxSettings = {
          headers: {
            'Authorization': 'Bearer ' + x
          }
        };
        this.exportAccesstoken = x;
      });
  }

  viewerOnExport(event) {
    event.args.FormData['access_token'] = this.exportAccesstoken;
  }

  ngOnInit() {
    if(this.activateRoute.snapshot.queryParams['reportId']) {
      this.reportUrl = this.activateRoute.snapshot.queryParams['reportId'];
    }
  }
}

The ConfigureJwtBearerOptions service on the server parses the request and extracts the token:

ConfigureJwtBearerOptions.cs

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Extensions.Options;
namespace AspNetCore.Reporting.Common.Services {

    public class ConfigureJwtBearerOptions : IPostConfigureOptions<JwtBearerOptions> {
        public void PostConfigure(string name, JwtBearerOptions options) {
            var originalOnMessageReceived = options.Events.OnMessageReceived;
            options.Events.OnMessageReceived = async context => {
                await originalOnMessageReceived(context);

                if(string.IsNullOrEmpty(context.Token) 
                 && context.Request.HasFormContentType) {
                    var formData = await context.Request.ReadFormAsync();
                    var accessToken = formData?["access_token"];
                    var path = context.HttpContext.Request.Path;

                    if(!string.IsNullOrEmpty(accessToken) &&
                        path.StartsWithSegments("/DXXRDVAngular")) {
                        context.Token = accessToken;
                    }
                }
            };
        }
    }
}

Register the service at application startup:

C#

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Options;
using Microsoft.AspNetCore.Authentication.JwtBearer;
// ...
    public class Startup
    {
        // ...
        public void ConfigureServices(IServiceCollection services)
        {
            // ...
            services.TryAddEnumerable(
                ServiceDescriptor.Singleton<IPostConfigureOptions<JwtBearerOptions>,
                ConfigureJwtBearerOptions>()
                );
            // ...
        }
        // ...
    }