Skip to main content

Print and Export in Vue Application

  • 4 minutes to read

In the code that runs on the server, call the PrintToolBase.Print method. It sends a document to the server’s printer (the system default or a specific printer), and applies the default print settings.

To print a report on the client’s printer, export a report to PDF on the server and send the PDF file back to the client. This method uses the browser’s printing functionality. 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.



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:

Customize Export Procedure

The server-side reporting engine generates a report document and exports it to the specified format. You can implement the WebDocumentViewerOperationLogger service and override the ExportDocumentStarting method to add custom code that runs when the user selects the Export command. This technique allows you to completely redefine the built-in export.

See Also