jQuery Common - Client-Side Exporting and Printing
Although the DevExtreme Data Visualization widgets 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 widgets provide the client-side exporting and printing features. This guide shows how to use these features in the UI and in code. Also, it explains how to set up a server-side proxy that is necessary if you plan to support these features in Safari on Mac OS.
Exporting and Printing in the UI
To export or print a widget, 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 options 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 widget into five formats: PNG, PDF, JPEG, SVG and GIF. To alter this set, use the formats option. In addition, you can change the default name for the file with the exported widget using the fileName option. - Background Color
By default, the background of the widget is transparent. To fill it with a color of your choice, specify the backgroundColor option.
See Also
- Setting Up a Server-Side Proxy - shows how to set up a server-side proxy to support the exporting and printing features in the Safari on Mac OS browser.
Exporting and Printing in Code
To export a widget 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 widget, 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 widgets 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.
Setting Up a Server-Side Proxy
If your application will be used in browsers that do not implement an API for saving files (for instance, Safari on Mac OS before version 10) and you need the exporting feature to work correctly, you can implement a server-side proxy, which will stream the file back to an end user in response to a POST request. The proxy implementation is different for each platform.
ASPx
If your server runs the ASP.NET web application framework, you can implement a proxy using the following HTTP handler.
using System; using System.Web; namespace ExportService { public class ExportHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { if(context.Request.Form["contentType"] != null && context.Request.Form["fileName"] != null && context.Request.Form["data"] != null) { context.Response.Clear(); context.Response.ContentType = context.Request.Form["contentType"].ToString(); context.Response.Charset = "UTF-8"; context.Response.Expires = 0; context.Response.AppendHeader("Content-transfer-encoding", "binary"); context.Response.AppendHeader("Content-Disposition", "attachment; filename=" + context.Request.Form["fileName"].ToString()); context.Response.BinaryWrite(Convert.FromBase64String(context.Request.Form["data"].ToString())); context.Response.Flush(); context.Response.End(); } } public bool IsReusable { get { return false; } } } }
Imports System Imports System.Web Namespace ExportService Public Class ExportHandler Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest If context.Request.Form("contentType") IsNot Nothing AndAlso context.Request.Form("fileName") IsNot Nothing AndAlso context.Request.Form("data") IsNot Nothing Then context.Response.Clear() context.Response.ContentType = context.Request.Form("contentType").ToString() context.Response.Charset = "UTF-8" context.Response.Expires = 0 context.Response.AppendHeader("Content-transfer-encoding", "binary") context.Response.AppendHeader("Content-Disposition", "attachment; filename=" & context.Request.Form("fileName").ToString()) context.Response.BinaryWrite(Convert.FromBase64String(context.Request.Form("data").ToString())) context.Response.Flush() context.Response.End() End If End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class End Namespace
PHP
If your server-side language is PHP, add a page with the following code to your website.
<?php if(!empty($_POST["data"]) && !empty($_POST["contentType"]) && !empty($_POST["fileName"])) { header("Access-Control-Allow-Origin: *"); header("Content-type: {$_POST[contentType]};\n"); header("Content-Transfer-Encoding: binary"); header("Content-length: ".strlen($_POST["data"]).";\n"); header("Content-disposition: attachment; filename=\"{$_POST[fileName]}\""); die(base64_decode($_POST["data"])); } ?>
Usage
To enable server-side proxy support in a widget, set the export.proxyUrl option to the proxy that will stream the file to an end user.
If you have technical questions, please create a support ticket in the DevExpress Support Center.