Skip to main content

AsyncExportApproach Variable

Allows you to export documents asynchronously.

Declaration

export var AsyncExportApproach: (newVal?: boolean) => boolean;

Members

Type
(newVal?: boolean) => 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: