All docs
V20.1
20.2 (EAP/Beta)
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

AsyncExportApproach Variable

Allows you to export documents asynchronously.

Declaration

var AsyncExportApproach: boolean;

Members

Type Description
boolean

True to perform document export asynchronously; otherwise, false.

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 property 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 DevExpress from 'devexpress-reporting/dx-webdocumentviewer';
// ...
export class AppComponent {
  title = 'DXReportViewerSample';
  reportUrl: string = 'Products';
  hostUrl: string = 'http://localhost:54114/';
  invokeAction: string = "/WebDocumentViewer/Invoke";

  configureViewer(event) {
    DevExpress.Reporting.Viewer.Settings.AsyncExportApproach=true;
  }
}

In applications with the React or Vue-based client, handle the BeforeRender event as illustrated in the following code snippets:

import React from "react";
import DevExpress from "devexpress-reporting/dx-webdocumentviewer";
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: "http://localhost:64673/",
        invokeAction: "DXXRDV"
    };
    this.exportDocument = this.exportDocument.bind(this);

    this.callbacks = {
      BeforeRender: function(s, e){
        // Enable the asynchronous export mode.
        DevExpress.Reporting.Viewer.Settings.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: