1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Connecting to JSON using the Data Compressor
      3. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using the Data Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to a database with Node.js
      4. Connecting to a database with .NET
      5. Connecting to a database with .NET Core
      6. Connecting to a database with Java
      7. Connecting to a database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with the Accelerator
      3. Installing the Accelerator as a Windows service
      4. Referring the Accelerator as a DLL
      5. Configuring the authentication process
      6. Configuring a secure HTTPS connection
      7. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    6. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
  4. Security
    1. Security in Flexmonster
    2. Security aspects when connecting to an OLAP cube
      1. The data transfer process
      2. Data security
      3. Data access management
    3. Security aspects when connecting to a database
      1. The data transfer process
      2. Data access management
  5. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set the report for the component
    8. Get the report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  6. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with Webpack
    6. Integration with ASP.NET
    7. Integration with jQuery
    8. Integration with JSP
    9. Integration with TypeScript
    10. Integration with RequireJS
    11. Integration with PhoneGap
  7. Integration with charts
    1. Integration with Highcharts
    2. Integration with Google Charts
    3. Integration with FusionCharts
    4. Integration with any charting library
  8. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Customizing context menu
    4. Localizing component
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.6 to 2.7
    4. Migration guide from 2.5 to 2.6
    5. Migration guide from 2.4 to 2.5
    6. Migration guide from 2.3 to 2.4
    7. Migration guide from 2.2 to 2.3
    8. Documentation for older versions
Table of contents

Export and print

All current data from the grid or chart can be exported in various formats. It is an easy and convenient way to save the results of your work. The exported file can be saved to the local file system or to your server.

The API call exportTo() is used for exporting and the API call print() is used for printing.

Print

The printing of the contents of the grid or chart via the OS print manager can be configured with the following options object inside the print() call:

options (optional) – Object. Can contain the following print properties:

  • header (from v2.211) (optional) – String. The header is set using the HTML format (tags, inline styles, img with base64 src), rendered in the browser, and added as an image to the printed PDF file. The following tokens can be used: ##CURRENT-DATE##, ##PAGE-NUMBER##. They will be replaced by the appropriate data.
  • footer (from v2.211) (optional) – String. The footer is set using the HTML format (tags, inline styles, img with base64 src), rendered in the browser, and added as an image to the printed PDF file. The following tokens can be used: ##CURRENT-DATE##, ##PAGE-NUMBER##. They will be replaced by appropriate data.

Below is an example with header and footer parameters:

var options = {
    header:"<div>##CURRENT-DATE##</div>",
    footer:"<div>##PAGE-NUMBER##</div>"
}
flexmonster.print(options);

Check out how this sample works on JSFiddle.

Export to HTML

To export to HTML set the first parameter of exportTo() to "html". The second parameter is an optional object that can contain the following properties:

  • filename (optional) – String. The name of the created file. The default name is "pivotgrid".
  • destinationType (optional) – String. Defines where the component’s contents will be exported. The destination type can be the following:
    • "file" (default) – the component’s contents will be exported to a file to the local computer.
    • "server" – the component’s contents will be exported to the server (a server-side script is required).
    • "plain" – the component’s content will be exported as a string and returned with callbackHandler.
  • footer (from v2.211) (optional) – String. The footer is set using the HTML format (tags, inline styles, img with base64 src). The following token can be used: ##CURRENT-DATE##. It will be replaced by appropriate data.
  • header (from v2.211) (optional) – String. The header is set using the HTML format (tags, inline styles, img with base64 src). The following token can be used: ##CURRENT-DATE##. It will be replaced by appropriate data.
  • url (optional) – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

The third parameter of exportTo() is the callbackHandler – a function that is called when the data is ready to be exported. The callbackHandler takes an object with the data property containing the data to be exported. The callbackHandler is an optional parameter.

Here is an example of how to save to a local HTML file:

var params = {
	filename: 'flexmonster'
};
flexmonster.exportTo('html', params);

Try the example on JSFiddle.

Saving to server:

var params = {
	destinationType: 'server',
	header:"<div>Table One</div>",
	footer:"<div>##CURRENT-DATE##</div>",
	url: 'your server-side script'
};
flexmonster.exportTo('html', params);

Export to CSV

To export to CSV set the first parameter of exportTo() to "csv". The second parameter is an optional object that can contain the following properties:

  • fieldSeparator (optional) – String. Defines the field separator to split each CSV row in the export file. The default separator is ,.
  • filename (optional) – String. The name of the created file. The default name is "pivot".
  • destinationType (optional) – String. Defines where the component’s contents will be exported. The destination type can be the following:
    • "file" (default) – the component’s contents will be exported to a file to the local computer.
    • "server" – the component’s contents will be exported to the server (a server-side script is required).
    • "plain" – the component’s content will be exported as a string and returned with callbackHandler.
  • url (optional) – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

The third parameter of exportTo() is the callbackHandler – a function that is called when the data is ready to be exported. The callbackHandler takes an object with the data property containing the data to be exported. The callbackHandler is an optional parameter.

Here is how to save a local CSV file and get the resulting data within the callbackHandler:

var params = {
	filename: 'flexmonster'
};
flexmonster.exportTo('csv', params, 
	function(result) {console.log(result.data)}
);

Check out an example on JSFiddle.

Saving to server:

var params = {
	destinationType: 'server',
	url: 'your server-side script'
};
flexmonster.exportTo('csv', params);

Export to Excel

To export to Excel set the first parameter of exportTo() to "excel". The second parameter is an optional object that can contain the following properties:

  • filename (optional) – String. The name of the created file. The default name is "pivot".
  • destinationType (optional) – String. Defines where the component’s contents will be exported. The destination type can be the following:
    • "file" (default) – the component’s contents will be exported to a file to the local computer.
    • "server" – the component’s contents will be exported to the server (a server-side script is required).
    • "plain" – the component’s content will be exported as an Uint8Array and returned with callbackHandler.
  • excelSheetName (from v2.2) (optional) – String. Sets the sheet name.
  • showFilters (from v2.1) (optional) – Boolean. Indicates whether the filters info will be shown (true) in the exported Excel file or not (false). Default value: false.
  • url (optional) – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.
  • useOlapFormattingInExcel (from v2.2) (optional) – Boolean. Indicates how to export the grid cells to the Excel file if the formatting in the component is taken from an OLAP cube – as a formatted string (true) or as numbers without any formatting (false). In previous versions, this was not configurable and the cells were exported as formatted strings.
  • useCustomizeCellForData (optional) – Boolean. Specifies how cells modified by customizeCell are exported: as formatted strings (true) or as numbers without formatting (false). Default value: true.

The third parameter of exportTo() is the callbackHandler – a function that is called when the data is ready to be exported. The callbackHandler takes an object with the data property containing the data to be exported. The callbackHandler is an optional parameter.

You can add custom fields that will be displayed in the exported Excel table. This can be done by defining the customFields property in your report. For more details check out an example.

This is how to save a report as a local Excel file:

var params = {
	filename: 'flexmonster',
	excelSheetName: 'Report',
	showFilters: true,
	useOlapFormattingInExcel: false
};
flexmonster.exportTo('excel', params);

Check out an example on JSFiddle.

Saving to the server:

var params = {
	destinationType: 'server',
	url: 'your server-side script'
};
flexmonster.exportTo('excel', params);

Export to an image

To export to an image set the first parameter of exportTo() to "image". The second parameter is an optional object that can contain the following properties:

  • filename (optional) – String. The name of the created file. The default name is "pivotgrid".
  • destinationType (optional) – String. Defines where the component’s contents will be exported. The destination type can be the following:
    • "file" (default) – the component’s contents will be exported to a file to the local computer.
    • "server" – the component’s contents will be exported to the server (a server-side script is required).
    • "plain" – the component’s content will be exported as an HTMLCanvasElement and returned with callbackHandler.
  • url (optional) – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

The third parameter of exportTo() is the callbackHandler – a function that is called when the data is ready to be exported. The callbackHandler takes an object with the data property containing the data to be exported. The callbackHandler is an optional parameter.

Here is how to save the image as a local file:

var params = {
	filename: 'flexmonster'
};
flexmonster.exportTo('image', params);

Try the example on JSFiddle.

Saving to server:

var params = {
	destinationType: 'server',
	url: 'your server-side script'
};
flexmonster.exportTo('image', params);

Export to PDF

To export to PDF set the first parameter of exportTo() to "pdf". The second parameter is an optional object that can contain the following properties:

  • filename (optional) – String. The name of the created file. The default name is "pivot".
  • destinationType (optional) – String. Defines where the component’s contents will be exported. The destination type can be the following:
    • "file" (default) – the component’s contents will be exported to a file to the local computer.
    • "server" – the component’s contents will be exported to the server (a server-side script is required).
    • "plain" – only available when exporting a PDF. This destination type allows you to modify the generated PDF file. The component’s contents will be exported to a jsPDF object and returned with the callbackHandler. jsPDF is a library that generates PDFs using client-side JavaScript. After exporting from Flexmonster, the jsPDF object can be modified using the jsPDF API and then saved. See an example.
  • footer (from v2.211) (optional) – String. The footer is set using the HTML format (tags, inline styles, img with base64 src), rendered in the browser, and added as an image to the exported PDF file. The following tokens can be used: ##CURRENT-DATE##, ##PAGE-NUMBER##. They will be replaced by appropriate data.
  • header (from v2.211) (optional) – String. The header is set using the HTML format (tags, inline styles, img with base64 src), rendered in the browser, and added as an image to the exported PDF file. The following tokens can be used: ##CURRENT-DATE##, ##PAGE-NUMBER##. They will be replaced by appropriate data.
  • pageFormat (optional) – String. Defines the page format for the PDF file. The following sizes are available: "A0", "A1", "A2", "A3", "A4", "A5". Default value: "A4".
  • pageOrientation (optional) – String. Defines the page orientation for the PDF file. Page orientation can be either "portrait" or "landscape". Default value: "portrait".
  • url (optional) – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

The third parameter of exportTo() is the callbackHandler – a function that is called when the data is ready to be exported. The callbackHandler takes an object with the data property containing the data to be exported. The callbackHandler is an optional parameter.

Here is how to save the report as a local PDF file:

var params = {
	filename: 'flexmonster',
	header:"<div>##CURRENT-DATE##</div>",
	footer:"<div>##PAGE-NUMBER##</div>",
	pageOrientation: 'landscape'
};
flexmonster.exportTo('pdf', params);

Check out the example on JSFiddle.

Saving to server:

var params = {
	destinationType: 'server',
	url: 'your server-side script'
};
flexmonster.exportTo('pdf', params);

Modifying generated PDF and saving locally:

flexmonster.exportTo("pdf", { destinationType: "plain" }, function(res) {
  var pdf = res.data;
  pdf.addPage();
  pdf.text('Hello world!', 10, 10);
  pdf.save(res.filename);
});

Open on JSFiddle.

How to export to the server without using a browser

You can easily export to the server without using a browser by using PhantomJS. Check out an example on GitHub which includes:

  1. A script file pivot.js for PhantomJS. Usage from the command line:
    phantomjs pivot.js
  2. The pivot table itself with the necessary API calls in the index.html file to export the report.
  3. A very simple save.php sample to save generated files.