Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

AsyncExportApproach Function

Allows you to export documents asynchronously.

#Declaration

TypeScript
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:

'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

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