AsyncExportApproach Function
Allows you to export documents asynchronously.
Declaration
export const AsyncExportApproach: DevExpress.Analytics.Internal.IGlobalSubscribableValue<boolean>
Parameters
Name | Type |
---|---|
newVal | boolean |
Returns
Type |
---|
boolean |
Remarks
To switch to asynchronous export mode, handle one of the following client-side events based on your framework:
ASP.NET Web Forms or MVC | ASP.NET Core |
---|---|
ASPxClientWebDocumentViewer.Init | ASPxClientWebDocumentViewer.BeforeRender |
In the event handler, set the AsyncExportApproach
to true:
<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" DisableHttpHandlerValidation="False">
<ClientSideEvents Init="function(s, e) {
DevExpress.Reporting.Viewer.Settings.AsyncExportApproach(true);}" />
</dx:ASPxWebDocumentViewer>
In an Angular-based application, handle the BeforeRender event as illustrated in the following code snippets:
import { AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'
// ...
export class AppComponent {
title = 'DXReportViewerSample';
reportUrl: string = 'Products';
hostUrl: string = 'https://localhost:54114/';
invokeAction: string = "/WebDocumentViewer/Invoke";
configureViewer(event) {
AsyncExportApproach(true);
}
}
In applications with the React or Vue-based client, handle the BeforeRender event as illustrated in the following code snippets:
import { AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'
import React from "react";
import ko from "knockout";
class ReportViewer extends React.Component {
constructor(props) {
super(props);
this.reportUrl = ko.observable("TestReport");
this.previewModel = ko.observable();
this.requestOptions = {
// Specify the server-side application port.
host: "https://localhost:64673/",
invokeAction: "DXXRDV"
};
this.exportDocument = this.exportDocument.bind(this);
this.callbacks = {
BeforeRender: function(s, e){
// Enable the asynchronous export mode.
AsyncExportApproach(true);
}
};
};
exportDocument() {
this.previewModel().ExportTo('xlsx');
};
render() {
return (
<div>
<button onClick={() => this.exportDocument()}>
Export to XLSX
</button>
<div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
</div>
);
}
componentDidMount() {
ko.applyBindings({
reportUrl: this.reportUrl,
viewerModel: this.previewModel,
requestOptions: this.requestOptions,
callbacks: this.callbacks
}, this.refs.viewer);
}
componentWillUnmount() {
ko.cleanNode(this.refs.viewer);
}
};
export default ReportViewer;
When the Document Viewer exports a document asynchronously, it opens a new browser page (tab) with a progress indicator: