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:

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

'use client';
import React from 'react';
import ReportViewer, { Callbacks, DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID, AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onCustomizeExportOptions = (event: any): void => {
    event.args.HideExportOptionsPanel();
    var model = event.args.GetExportOptionsModel(ExportFormatID.XLSX);
    // Encrypt the file. Encryption is performed in asynchronous mode.
    //model.encryptionOptions.password = "1234";
    model.documentOptions.author = "Me";
  };
  const onBeforeRender = (event: any): void => {
    AsyncExportApproach(true);
  };
  const exportDocument = () => viewerRef.current?.instance().ExportTo('xlsx');
  return (
    <>
      <button onClick={exportDocument}>Export to XLSX</button>
      <ReportViewer ref={viewerRef} reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks CustomizeExportOptions={onCustomizeExportOptions} BeforeRender={onBeforeRender} />
      </ReportViewer>
    </>
  )
}

export default App

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);
    },
    beforeUnmount() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

View Example: Reporting for React - Customize a Web Document Viewer in a React App (Next.js)

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