All current data from the grid or chart can be exported to 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.
To see different examples of exporting the report, visit our Examples page.
Note In Flexmonster, you can also save, share, or print your report.
Step 1. Open a view that you want to export. It can be one of the following:
Step 2. Select Export on the Toolbar and choose the export format:
Note A chart view can be exported only to PDF, HTML, or an image. If you start exporting a chart view to Excel or CSV, a grid view will be exported instead.
To export the report programmatically, use the exportTo() API call.
To export the report to Excel, set the type parameter of the exportTo()
to "excel"
. The second parameter is an optional object that can contain the following properties:
Property/Type | Description |
---|---|
filename String |
optional The name of the created file. Default name: "pivot" .
|
destinationType String |
optional Defines where the component’s contents will be exported. The destination type can be the following:
"file" .
|
excelSheetName String |
optional Sets the sheet name. |
header String |
optional Specify the header as a string (e.g., "Custom header" ). In addition, you can add a multirow header by using the "\n" character: "Row1\nRow2\nRow3" .The header property is available starting from version 2.7.24. |
footer String |
optional Specify the footer as a string (e.g., "Custom footer" ). In addition, you can add a multirow footer by using the "\n" character: "Row1\nRow2\nRow3" .The footer property is available starting from version 2.7.24. |
showFilters Boolean |
optional Indicates whether the exported file should list all filtered fields (true ) or filtered fields only from report filters (false ).If there are no fields in report filters, this property is ignored. Default value: false .
|
url String |
optional To save the file to the server, provide the component with a path to the server-side script that can save this file. |
useOlapFormattingInExcel Boolean |
optional 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 Boolean |
optional 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 the exportTo()
is an optional callbackHandler. It is a function that is called when the data is ready to be exported. The callbackHandler
takes two parameters: result
and error
objects. Learn more about them in the API reference.
See the following examples of exporting the report to PDF:
1) Saving the report as a local Excel file:
const params = { filename: 'flexmonster', header:"First header row\nSecond header row", footer:"Table Footer", excelSheetName: 'Report', showFilters: true, useOlapFormattingInExcel: false }; flexmonster.exportTo('excel', params);
Check out an example on JSFiddle.
2) Saving to the server:
const params = { destinationType: 'server', url: 'your server-side script' }; flexmonster.exportTo('excel', params);
When exporting the report to Excel, measures will contain at least one decimal place in the output file if they don't have a number format with the explicitly defined decimalPlaces property.
To change this behavior so some measures are displayed as integers, set the decimalPlaces
to 0
in the number format for these measures:
report: { formats: [ { name: "decimalFormat", decimalPlaces: 0 } ], slice: { measures: [ { uniqueName: "Price", aggregation: "sum", format: "decimalFormat" }, ], // Other slice properties }, // Other configs }
See the example on JSFiddle.
Alternatively, all measures can be displayed as integers in the output file if you set the decimalPlaces
to 0
in the default number format.
To export the report to PDF, set the type parameter of the exportTo()
to "pdf"
. The second parameter is an optional object that can contain the following properties:
Property/Type | Description |
---|---|
filename String |
optional The name of the created file. Default name: "pivot" .
|
destinationType String |
optional Defines where the component’s contents will be exported. The destination type can be the following:
"file" .
|
fontUrl String |
optional The URL to the TTF font file for saving PDF reports in Chinese, Arabic, or any other language. Check out the list of ready-to-use Google Noto Fonts that you can use to support almost any language in the world. Only fonts in standard TTF format are supported. |
header String | HTML string |
optional When setting the header in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML header is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.Besides, you can use the ##CURRENT-DATE## and ##PAGE-NUMBER## tokens in the header. |
footer String | HTML string |
optional When setting the footer in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML footer is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.Besides, you can use the ##CURRENT-DATE## and ##PAGE-NUMBER## tokens in the footer . |
pageFormat String |
optional Defines the page format for the PDF file. The following sizes are available: "A0" , "A1" , "A2" , "A3" , "A4" , "A5" . Default value: "A4" .
|
pageOrientation String |
optional Defines the page orientation for the PDF file. Page orientation can be either "portrait" or "landscape" . Default value: "portrait" .
|
url String |
optional 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 the exportTo()
is an optional callbackHandler. It is a function that is called when the data is ready to be exported. The callbackHandler
takes two parameters: result
and error
objects. Learn more about them in the API reference.
See the following examples of exporting the report to PDF:
1) Saving the report as a local PDF file:
const params = { filename: 'flexmonster', header:"##CURRENT-DATE##", footer:"<div>##PAGE-NUMBER##</div>", pageOrientation: 'landscape' }; flexmonster.exportTo('pdf', params);
Check out the example on JSFiddle.
2) Saving to server:
const params = { destinationType: 'server', url: 'your server-side script' }; flexmonster.exportTo('pdf', params);
3) Modifying generated PDF and saving locally:
flexmonster.exportTo("pdf", { destinationType: "plain" }, function(res) { let pdf = res.data; pdf.addPage(); pdf.text('Hello world!', 10, 10); pdf.save(res.filename); } );
See the example on JSFiddle.
4) Setting TTF font file:
flexmonster.exportTo('pdf', { fontUrl: 'https://cdn.flexmonster.com/fonts/NotoSansCJKtc-Regular.ttf' });
Try a live sample on JSFiddle.
To export the report to CSV, set the type parameter of the exportTo()
to "csv"
. The second parameter is an optional object that can contain the following properties:
Property/Type | Description |
---|---|
alwaysEnclose Boolean |
optional Indicates whether to enclose all CSV fields in quotes. When set to true , the fields are always enclosed in quotes. Otherwise, they will be enclosed only when necessary (e.g., if a field contains a comma: Bike, "$15,000", blue ). Default value: false .
|
fieldSeparator String |
optional Defines the field separator to split each CSV row in the export file. Default separator: , .
|
filename String |
optional The name of the created file. Default name: "pivot" .
|
destinationType String |
optional Defines where the component’s contents will be exported. The destination type can be the following:
"file" .
|
header String |
optional Specify the header as a string (e.g., "Custom header" ). In addition, you can add a multirow header by using the "\n" character: "Row1\nRow2\nRow3" .The header property is available starting from version 2.7.24. |
footer String |
optional Specify the footer as a string (e.g., "Custom footer" ). In addition, you can add a multirow footer by using the "\n" character: "Row1\nRow2\nRow3" .The footer property is available starting from version 2.7.24. |
url String |
optional 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 the exportTo()
is an optional callbackHandler. It is a function that is called when the data is ready to be exported. The callbackHandler
takes two parameters: result
and error
objects. Learn more about them in the API reference.
Here is how to save a local CSV file and get the resulting data within the callbackHandler
:
const params = { filename: 'flexmonster', header:"First header row\nSecond header row", footer:"Table Footer", }; flexmonster.exportTo('csv', params, function(result) { console.log(result.data) });
Check out an example on JSFiddle.
Saving to server:
const params = { destinationType: 'server', url: 'your server-side script' }; flexmonster.exportTo('csv', params);
To export the report to HTML, set the type parameter of the exportTo()
to "html"
. The second parameter is an optional object that can contain the following properties:
Property/Type | Description |
---|---|
filename String |
optional The name of the created file. Default name: "pivotgrid" . |
destinationType String |
optional Defines where the component’s contents will be exported. The destination type can be the following:
"file" .
|
header String | HTML string |
optional When setting the header in the HTML string format, you can use tags, inline styles, and Base64 images. See an example on JSFiddle.Besides, you can use the ##CURRENT-DATE## token in the header . |
footer String | HTML string |
optional When setting the footer in the HTML string format, you can use tags, inline styles, and Base64 images. See an example on JSFiddle.Besides, you can use the ##CURRENT-DATE## token in the footer . |
url String |
optional 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 the exportTo()
is an optional callbackHandler. It is a function that is called when the data is ready to be exported. The callbackHandler
takes two parameters: result
and error
objects. Learn more about them in the API reference.
Here is an example of how to save to a local HTML file:
const params = { filename: 'flexmonster', header:"##CURRENT-DATE##", footer:"<div style='color:#df3800'>Table Footer</div>", }; flexmonster.exportTo('html', params);
Try the example on JSFiddle.
Saving to server:
const params = { destinationType: 'server', url: 'your server-side script' }; flexmonster.exportTo('html', params);
To export the report to an image, set the type parameter of the exportTo()
to "image"
. The second parameter is an optional object that can contain the following properties:
Property/Type | Description |
---|---|
filename String |
optional The name of the created file. Default name: "pivotgrid" .
|
destinationType String |
optional Defines where the component’s contents will be exported. The destination type can be the following:
"file" .
|
header String | HTML string |
optional When setting the header in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML header is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.Besides, you can use the ##CURRENT-DATE## token in the header .The header property is available starting from version 2.7.24. |
footer String | HTML string |
optional When setting the footer in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML footer is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.Besides, you can use the ##CURRENT-DATE## token in the footer .The footer property is available starting from version 2.7.24. |
url String |
optional 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 the exportTo()
is an optional callbackHandler. It is a function that is called when the data is ready to be exported. The callbackHandler
takes two parameters: result
and error
objects. Learn more about them in the API reference.
Here is how to save the image as a local file:
const params = { filename: 'flexmonster', header:"##CURRENT-DATE##", footer: "<div style='color:#df3800'>Table Footer</div>" }; flexmonster.exportTo('image', params);
Try the example on JSFiddle.
Saving to server:
const params = { destinationType: 'server', url: 'your server-side script' }; flexmonster.exportTo('image', params);
You can easily export the report without a browser using Puppeteer — a JavaScript library for working with headless browsers.
We prepared a sample GitHub project with Flexmonster and Puppeteer. It demonstrates how to export Flexmonster reports in headless browsers with Puppeteer.
There are two versions of the sample project: the main version uses Flexmonster from our CDN, while in another version, Flexmonster is included from the npm package.
To run the sample project, follow the steps below:
Step 1. Download or clone the needed version of the sample project:
Get the sample project where Flexmonster is included from CDN:
git clone https://github.com/flexmonster/pivot-puppeteer cd pivot-puppeteer
Get the sample project where Flexmonster is included from npm:
git clone -b flexmonster-from-nodemodules https://github.com/flexmonster/pivot-puppeteer cd pivot-puppeteer
Step 2. Install the npm dependencies described in package.json
:
npm install
Step 3. Run the project:
npm start
When the export is complete, find the saved files in the storage/
folder.
Now let's have a look at the project files' contents to understand how the sample project works:
The index.html file contains the pivot table subscribed to the ready
, reportcomplete
, and exportcomplete
events. These events will let us know when the report is ready to be exported and when the export is finished.
When the component triggers one of these events, the dispatchEvent() method triggers the same event for the browser window. This approach allows the browser to handle the component's events in its scope.
You can specify other Flexmonster events similarly.
The pivot.js file runs the browser and performs the export. This section describes its key points.
In the sample project, we use ready
, reportcomplete
, and exportcomplete
events to export the report. You can add other Flexmonster events in a similar way - check it out.
The next important part of the project is where we set a report. It's done using the setReport() function as soon as the component is initialized. You can replace the default report with an inline report or a link to it.
The exportTo()
function supports changing the file name or exporting the report to your server - just specify the corresponding export parameters. The structure of the parameters is the same as in the flexmonster.exportTo() API call.
For technical details on how the export is performed, see comments in the pivot.js
file.
You may be interested in the following articles: