Angular Common - Client-Side Exporting and Printing

Although the DevExtreme Data Visualization UI components can be displayed in any browser on any platform, there are cases when printing a chart or having it as an image or a document may be necessary for an end user. For these cases, the DevExtreme Data Visualization UI components provide the client-side exporting and printing features. This guide shows how to use these features in the UI and in code.

To export or print a UI component, a user clicks and selects a command from the drop-down menu that appears. The Print command opens the Print window in the browser that lets the user to select preferred printing properties and to send the print job to the printer. The other commands save a file of the selected format on the user's local storage.

Exporting and printing in the UI are configured by the export object. The following exporting and printing characteristics can be changed using the fields of this object.

• Availability
  To enable exporting, assign true to the enabled field. With this setting, printing becomes available as well. If you need only exporting, disable printing by setting the printingEnabled field to false.
• Formats and File Name
  By default, a user can export the UI component into five formats: PNG, PDF, JPEG, SVG and GIF. To alter this set, use the formats property. In addition, you can change the default name for the file with the exported UI component using the fileName property.
• Background Color
  By default, the background of the UI component is transparent. To fill it with a color of your choice, specify the backgroundColor property.

To export a UI component in code, call its exportTo(fileName, format) method passing the needed file name and format ('PNG', 'PDF', 'JPEG', 'SVG' or 'GIF') as the arguments.

widgetInstance.exportTo('Test Chart', 'PDF');

To print a UI component, call its print() method. Like the Print command in the Exporting/Printing menu, this method opens the Print window in the browser.

widgetInstance.print();

Also, the DevExtreme Data Visualization UI components fire the following exporting-related events.

• exporting
  Allows you to request export details or prevent exporting.
• exported
  Allows you to notify an end user when exporting is completed.
• fileSaving
  Allows you to access exported data in the BLOB format and/or prevent it from being saved in a file on the user's local storage.