Export the report

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.

Export the report via UI

Step 1. Open a view that you want to export. It can be one of the following:

• Grid view: compact, classic (tabular), or flat.
• Chart view: see available chart types.
• Grid and charts view.
  This view can be opened by setting the viewType to "grid_charts" or by calling the showGridAndCharts method.
• Drill-through view.

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:

Export the report programmatically

To export the report programmatically, use the exportTo() API call.

Export to Excel

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:

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.

Examples

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); 

Live example

2) Saving to the server:

const params = {
  destinationType: "server",
  url: "your server-side script" 
};

pivot.exportTo("excel", params); 

Change the separators for thousands and decimals in the exported file

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.

Display measures as integers in the exported file

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
}

Live example

Alternatively, all measures can be displayed as integers in the output file if you set the decimalPlaces to 0 in the default number format.

Other specifics of exporting to Excel

When you export the report to Excel, consider the following specifics:

• If you export a chart view to Excel, the grid view will be exported instead.
• "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.
• Bold formatting for value cells is not included in the exported Excel file.
• Some styles from Flexmonster themes or сustom CSS are not included in the exported Excel file.

Export to PDF

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:

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.

Examples

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); 

Live example

2) Saving to server:

const params = {
  destinationType: "server",
  url: "your server-side script"
};

pivot.exportTo("pdf", params); 

3) Modifying generated PDF, e.g., by adding a new page, and then saving the file locally:

pivot.exportTo("pdf", {
  destinationType: "plain",
}, result => {
  const pdf = result.data;
  pdf.addPage();
  pdf.text("/* Your text */", 10, 10);
  pdf.save(result.filename);
});

Live example

4) Setting TTF font file:

pivot.exportTo("pdf", {
  fontUrl: "https://cdn.flexmonster.com/fonts/NotoSansCJKtc-Regular.ttf"
});

Live example

CDN fonts for PDF export

Export to CSV

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:

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.

Examples

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)
}); 

Live example

Saving to server:

const params = {
  destinationType: "server",
  url: "your server-side script"
};

pivot.exportTo("csv", params); 

Export to HTML

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:

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.

Examples

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); 

Live example

Saving to server:

const params = {
  destinationType: "server", 
  url: "your server-side script" 
};

pivot.exportTo("html", params); 

Export to an image

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:

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.

Examples

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); 

Live example

Saving to server:

const params = {
  destinationType: "server",
  url: "your server-side script"
};

pivot.exportTo("image", params); 

How to export to the server without using a browser

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:

git clone https://github.com/flexmonster/pivot-puppeteer
cd pivot-puppeteer

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:

Specifics of exporting reports

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:

• A node is not included in the exported file if its parent nodes are collapsed.
• A hierarchy level is not included in the exported file if its parent hierarchy levels are drilled up.
• In the exported file, expanded nodes cannot be collapsed and drilled-down levels cannot be drilled up.
• Fields that are not included in the slice are not included in the exported file as well.

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.

How to display non-Latin characters in the exported file

If you are using data or localization with non-Latin characters, ensure you have set UTF-8 encoding for your data or page. This is required to display the exported report file correctly in the component.

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.

How cells modified by customizeCell are displayed in the exported 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.

What’s next?

You may be interested in the following articles:

• How to save and restore the report
• How to share the report
• How to print the report
• How to define a format for date and time
• How to add localization
• How to customize the appearance with CSS