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.
Note that there are specifics of exporting reports. To see different examples of exporting the report, visit our Examples page.
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:
"grid_charts"
or by calling the showGridAndCharts method.Note If you export a chart view to Excel or CSV, the grid view will be exported instead.
Step 2. Select Export on the Toolbar and choose the export format:
To export the report programmatically, use the exportTo() API call.
To export the report to Excel, set the type parameter of the exportTo()
method to "excel"
. The method's 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 It defines where the component's contents will be exported. The destinationType can have the following values:
"file" . |
excelSheetName String | optional Sets the sheet name. |
header String | optional String that will be displayed in the header section of the exported file. You can also add a multirow header using the "\n" character: "Row1\nRow2\nRow3" .A cell with the header spans multiple columns in the exported Excel file, with a maximum of 10 columns. This ensures that the header is always visible to a user.Live example |
footer String | optional String that will be displayed in the footer section of the exported file. You can also add a multirow footer using the "\n" character: "Row1\nRow2\nRow3" .A cell with the footer spans multiple columns in the exported Excel file, with a maximum of 10 columns. This ensures that the footer is always visible to a user.Live example |
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 . |
requestHeaders Object | optional It allows adding custom request headers when the destinationType property is "server" . The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value. |
url String | optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server" . |
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 Indicates whether cells modified by customizeCell() are exported as formatted strings (true ) or as numbers without formatting (false ). Learn more about how the modified cells are displayed in the exported file.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.
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
};
pivot.exportTo("excel", params);
2) Saving to the server:
const params = {
destinationType: "server",
url: "your server-side script"
};
pivot.exportTo("excel", params);
In the exported Excel file, separators for thousands and decimals are taken from your system's regional settings instead of the thousandsSeparator and the decimalSeparator set in the component.
See how to change the separator for thousands and decimals in Excel.
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 display the necessary measures 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 }
Alternatively, all measures can be displayed as integers in the output file if you set the decimalPlaces
to 0
in the default number format.
When you export the report to Excel, consider the following specifics:
"date string"
, "datetime"
, and "time"
fields selected for measures will use the default Excel format in the exported file instead of the datePattern, dateTimePattern, and timePattern formats. See how to create a custom date or time format in Excel.To export the report to PDF, set the type parameter of the exportTo()
method to "pdf"
. The method's 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 It defines where the component's contents will be exported. The destinationType can have the following values:
"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 String that will be displayed in the header section of the exported file. You can set the header as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.When setting the header, you can use the following tokens in the string:
|
footer String | HTML string | optional String that will be displayed in the footer section of the exported file. You can set the footer as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.When setting the footer, you can use the following tokens in the string:
|
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" . |
requestHeaders Object | optional It allows adding custom request headers when the destinationType property is "server" . The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value. |
url String | optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server" . |
useCustomizeCellForData Boolean | optional Indicates whether cells modified by customizeCell() are exported as formatted strings (true ) or as numbers without formatting (false ). Learn more about how the modified cells are displayed in the exported file.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.
1) Saving the report as a local PDF file:
const params = {
filename: "flexmonster",
header: "##CURRENT-DATE##",
footer: "<div>##PAGE-NUMBER##</div>",
pageOrientation: "landscape"
};
pivot.exportTo("pdf", params);
2) Saving to server:
const params = {
destinationType: "server",
url: "your server-side script"
};
pivot.exportTo("pdf", params);
3) Modifying generated PDF and saving locally:
pivot.exportTo("pdf", { destinationType: "plain" },
function(res) {
let pdf = res.data;
pdf.addPage();
pdf.text("Hello world!", 10, 10);
pdf.save(res.filename);
}
);
4) Setting TTF font file:
pivot.exportTo("pdf", {
fontUrl: "https://cdn.flexmonster.com/fonts/NotoSansCJKtc-Regular.ttf"
});
To export the report to CSV, set the type parameter of the exportTo()
method to "csv"
. The method's 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 It defines where the component's contents will be exported. The destinationType can have the following values:
"file" . |
header String | optional String that will be displayed in the header section of the exported file. You can also add a multirow header using the "\n" character: "Row1\nRow2\nRow3" .Live example |
footer String | optional String that will be displayed in the footer section of the exported file. You can also add a multirow footer using the "\n" character: "Row1\nRow2\nRow3" .Live example |
requestHeaders Object | optional It allows adding custom request headers when the destinationType property is "server" . The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value. |
url String | optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server" . |
useCustomizeCellForData Boolean | optional Indicates whether cells modified by customizeCell() are exported as formatted strings (true ) or as numbers without formatting (false ). Learn more about how the modified cells are displayed in the exported file.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.
Note If you export a chart view to CSV, the grid view will be exported instead.
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",
};
pivot.exportTo("csv", params, function(result) {
console.log(result.data)
});
Saving to server:
const params = {
destinationType: "server",
url: "your server-side script"
};
pivot.exportTo("csv", params);
To export the report to HTML, set the type parameter of the exportTo()
method to "html"
. The method's 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 It defines where the component's contents will be exported. The destinationType can have the following values:
"file" . |
header String | HTML string | optional String that will be displayed in the header section of the exported file. You can set the header as a regular string or as an HTML string with tags, inline styles, and Base64 images.When setting the header, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.Live example |
footer String | HTML string | optional String that will be displayed in the footer section of the exported file. You can set the footer as a regular string or as an HTML string with tags, inline styles, and Base64 images.When setting the footer, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.Live example |
requestHeaders Object | optional It allows adding custom request headers when the destinationType property is "server" . The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value. |
url String | optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server" . |
useCustomizeCellForData Boolean | optional Indicates whether cells modified by customizeCell() are exported as formatted strings (true ) or as numbers without formatting (false ). Learn more about how the modified cells are displayed in the exported file.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.
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>",
};
pivot.exportTo("html", params);
Saving to server:
const params = {
destinationType: "server",
url: "your server-side script"
};
pivot.exportTo("html", params);
To export the report to an image, set the type parameter of the exportTo()
method to "image"
. The method's 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 It defines where the component's contents will be exported. The destinationType can have the following values:
"file" . |
header String | HTML string | optional String that will be displayed in the header section of the exported file. You can set the header as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.When setting the header, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.Live example |
footer String | HTML string | optional String that will be displayed in the footer section of the exported file. You can set the footer as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.When setting the footer, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.Live example |
requestHeaders Object | optional It allows adding custom request headers when the destinationType property is "server" . The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value. |
url String | optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server" . |
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>"
};
pivot.exportTo("image", params);
Saving to server:
const params = {
destinationType: "server",
url: "your server-side script"
};
pivot.exportTo("image", params);
You can easily export the report without a browser using Puppeteer — a JavaScript library for working with headless browsers. This approach provides more ways to customize the exporting functionality. For example, you can schedule automatic sending of the exported report to others (e.g., via email).
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 modify the event handlers to add new functionality, such as scheduled sending of the exported report via email. Other Flexmonster events can be added 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.
When you export the report, consider that the resulting file is static and contains the data that is present on the grid and charts at the moment of exporting. This means the following:
Also, note that the chart view or the grid and charts view can be exported only to PDF, HTML, or an image. If you start exporting a chart view to Excel or CSV, the grid view will be exported instead.
To ensure the best performance when exporting the report, do not switch to other browser tabs, and do not minimize the browser window.
If you are using data or localization with non-Latin characters, ensure you have set UTF-8 encoding for your data or page so the exported report file is not corrupted.
Note To correctly export the report with non-Latin characters to PDF, use the exportTo() method with the params.fontUrl property set to the URL that leads to the necessary TTF font file.
By default, if you modify a value cell using the cell.text property, this cell will be exported as a string. If you want such cells to be exported as unformatted numbers, set the useCustomizeCellForData to false
.
Note If the cell.text property contains custom HTML code, the useCustomizeCellForData must be set to false
. Otherwise, raw HTML code will be displayed in the exported file.
You may be interested in the following articles: