All docs
V21.1
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
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.

Print and Export in Vue Application

  • 3 minutes to read

Use the Web Document Viewer component to print or export report documents in a web application.

You can print and export reports on the server side without a preview. For more information, review the following help topic: Print and Export without a Preview in Vue Application.

The Document Viewer renders the report in PDF format. You can print the report within the Document Viewer’s interface or in code.

Click Print to print the entire document or click Print Page to print the currently active document page. kq HTML5DC_PrintButton

HTML5DC_PrintPageButton

Use the PDF Plugin

If the PDF plugin is installed in your browser, the Print dialog is invoked. To print the document, specify print settings and click Print:

If the PDF plugin is unavailable, the Document Viewer exports the report document to a PDF file and offers to download this file instead of printing. The resulting PDF file contains a script that invokes the Print dialog when the PDF viewer opens the file.

The browser print the document in the same tab. You can set the UseSameTab property to false to open a new tab (page) to print a document.

Use the DevExpress.Reporting.Viewer.Utils.IPreviewModel.Print method to print a report. The method returns PDF data and the Document Viewer passes this data to the browser.

Export Reports on the Client Side

Export Reports within the Document Viewer’s UI

Click Export To and select an export format from the list to download the report in the selected format.

The browser exports the document in the same tab. You can set the UseSameTab property to false to open a new tab (page) to export a document.

You can click Export Options to invoke the Export Options Panel and specify format-specific options:

You can customize the Document Viewer panel as follows:

  • hide the Export Options panel
  • exclude export formats from the drop-down list
  • hide options for the specified export format
  • change the default export options displayed in the Export Options panel.

To do this, handle the CustomizeExportOptions event (ASP.NET) or specify the CustomizeExportOptions callback function (JavaScript frameworks). The function argument is an ASPxClientCustomizeExportOptionsEventArgs object. You can use its properties and methods to specify export options and customize the export panel.

Export to EMF and WMF formats is not supported in Linux environment. You can handle the client-side CustomizeExportOptions event to remove the Format combobox in the Image Export Options section of the Export Options tab:

function onCustomizeExportOptions(s, e) {
          e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.Image, "Format");            
}

The default Image export format is PNG. If you wish to set it to a different value, change the ImageExportOptions.Format property in the report’s ExportOptions.Image settings.

Export Reports in Code

Use the DevExpress.Reporting.Viewer.Utils.IPreviewModel.ExportTo method to export a document. Handle the CustomizeExportOptions client-side event to specify export options.

The Web Document Viewer can export reports asynchronously (export operations are run in the background). To switch to the asynchronous export mode, set the UseAsynchronousExport property to true, or use the client-side AsyncExportApproach property. The export action opens a new page that displays the progress indicator:

See Also