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

NuGet Package : DevExpress.AspNetCore.Reporting

csharp

public WebDocumentViewerClientSideEventsBuilder OnExport(
    string callback
)

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.

Note

In v23.1 and higher, our Web Reporting Controls use the Fetch API for all request types. In earlier versions, the Web Reporting Controls used jQuery Ajax to send web requests, and form.submit for export and print operations. The use of the Fetch API includes a unified method to pass request headers from a client to a back-end server. This eliminates the need to handle the OnExport event to process custom request headers for export and print operations.

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:

RequestUrlA string that specifies the request URL.FormDataA set of key-value pairs.

Example

Note

The following code snippets show how to pass the access token to the server if your application uses jQuery Ajax to send web requests, and form.submit for export and print operations. In v23.1 and higher, the Web Document Viewer uses the Fetch API to handle web requests, which includes a unified method to pass request headers from a client to a back-end server.

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 if your application uses jQuery Ajax to handle requests (the ajaxSetup object):

report-viewer.html
report-viewer.ts

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>
  <dxrv-export-settings [useSameTab]="useSameTabExport" [useAsynchronousExport]="useAsynchronousExport"></dxrv-export-settings>
</dx-report-viewer>

typescript

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/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';

  useSameTabExport = true;
  useAsynchronousExport = true;
  exportAccesstoken: string | null = null;

  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: any) {
    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

csharp

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;
                    }
                }
            };
        }
    }
}

Program.cs

csharp

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Options;
using Microsoft.AspNetCore.Authentication.JwtBearer;

var builder = WebApplication.CreateBuilder(args);

builder.Services.TryAddEnumerable(
    ServiceDescriptor.Singleton<IPostConfigureOptions<JwtBearerOptions>,
    ConfigureJwtBearerOptions>());

var app = builder.Build();