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.2.dll
NuGet Package: DevExpress.AspNetCore.Reporting
Declaration
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
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:
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:
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:
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>()
);
// ...
}
// ...
}