AsyncExportApproach Function

Allows you to export documents asynchronously.

Declaration

export var AsyncExportApproach: (newVal?: boolean) => 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:

ASP.NET Web Forms

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" DisableHttpHandlerValidation="False">
    <ClientSideEvents Init="function(s, e) {
        DevExpress.Reporting.Viewer.Settings.AsyncExportApproach(true);}" />
</dx:ASPxWebDocumentViewer>

ASP.NET MVC

@Html.DevExpress().WebDocumentViewer(settings => {
    settings.Name = "WebDocumentViewer1";
    settings.ClientSideEvents.Init = 
        "function(s, e){ DevExpress.Reporting.Viewer.Settings.AsyncExportApproach(true); }";
}).Bind("TestReport").GetHtml()

ASP.NET Core

<script type="text/javascript" id="script">
    function configureViewer(s, e) {
    DevExpress.Reporting.Viewer.Settings.AsyncExportApproach(true);
    }
</script>

@{
    var documentViewer = Html.DevExpress().WebDocumentViewer("webDocumentViewer1").Height("1000px");
    documentViewer.Bind("TestReport");
    documentViewer.ClientSideEvents(configure => { configure.BeforeRender("configureViewer"); });
}
@documentViewer

In an Angular-based application, handle the BeforeRender event as illustrated in the following code snippets:

app.component.ts

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

app.component.html

<dx-report-viewer [reportUrl]="reportUrl" height="800px">
    <dxrv-request-options 
        [invokeAction]="invokeAction" [host]="hostUrl">
    </dxrv-request-options>
    <dxrv-callbacks 
        (BeforeRender)="configureViewer($event)">
    </dxrv-callbacks>
</dx-report-viewer>

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

React

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;

Vue

<template>
<div>
    <div>
        <button @click='printDocument'>Export Document</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import { AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'
import ko from "knockout";

var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        printDocument() {
            this.previewModel().ExportTo('xlsx');
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
                // Specify the server-side application port.
                host: "https://localhost:64673/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var callbacks = {  
            BeforeRender: function(){
                // Enable the asynchronous export mode.
                AsyncExportApproach(true);
            }
        };  
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
    beforeDestroy() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

When the Document Viewer exports a document asynchronously, it opens a new browser page (tab) with a progress indicator: