Export the report

All current data from the grid or chart can be exported to various formats. By default, content is exported as a file to a user's device, but you can also export it to your server or customize how the exported content is handled.

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.

How to export the report

You can export the report via UI or using an API call:

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:

Using API call

To export the report programmatically, use the exportTo() API call. Its first parameter, type, defines the type of export. For example:

pivot.exportTo("pdf");

You can also configure different export parameters using the second exportTo() parameter, the params object, and specify a callbackHandler, a function that is called when the data is ready to be exported.

Export a report to the server

By default, the report contents are exported as a file to the local file system. To save the report to the server:

1. Set params.destinationType to "server" in exportTo().
2. Specify the server's URL in the params.url property.
3. optional Add custom request headers.

Example:

pivot.exportTo("pdf", {
  destinationType: "server",
  url: "<url_to_your_server>",
  requestHeaders: {
    Authorization: "Basic " + btoa("<your_username>:<your_password>")
  }
});

Export to the server without using a browser

To export Flexmonster reports in headless browsers, we recommend using Puppeteer. This approach provides more flexibility in exporting. 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. There are two versions of the project: the main version uses Flexmonster from our CDN, while the other version includes Flexmonster 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:

Define the name of the exported file

To specify the name of the resulting file, use the params.filename property. For example:

pivot.exportTo("pdf", {
  filename: "flexmonster.pdf"
});

Live example

Add a header and a footer to the exported file

To specify a header and footer text in the exported file, use the params.header and params.footer properties respectively. Check out the specifics of setting headers and footers for different export types:

pivot.exportTo("pdf", {
  header: "##CURRENT-DATE##",
  footer: "<div>##PAGE-NUMBER##</div>",
});

pivot.exportTo("excel", {
  header: "First header row\nSecond header row",
  footer: "Table Footer",
});

pivot.exportTo("csv", {
  header: "First header row\nSecond header row",
  footer: "Table Footer",
});

pivot.exportTo("html", {
  header: "##CURRENT-DATE##",
  footer: "<div style='color:#df3800'>##PAGE-NUMBER##</div>",
});

More configs for PDF export

When exporting the report to PDF, you can additionally configure the following:

• URL to the TTF font file for saving reports in Chinese, Arabic, or any other language
• Page format (A4, A3, etc.)
• Page orientation (portrait or landscape)

Check out the example of saving the report as a local PDF file:

const params = {
  fontUrl: "https://cdn.flexmonster.com/fonts/NotoSansCJKtc-Regular.ttf",
  pageFormat: "A3",
  pageOrientation: "landscape"
};

pivot.exportTo("pdf", params);

Live example

CDN fonts for PDF export

More configs for Excel export

When exporting the report to Excel, you can additionally configure the following:

• Name of the Excel sheet
• How filtered fields are displayed in the exported file using the showFilters property
• How to export grid cells if formatting is taken from an OLAP cube using the useOlapFormattingInExcel property

Check out the example:

const params = {
  excelSheetName: "Report",
  showFilters: true,
  useOlapFormattingInExcel: false
};

pivot.exportTo("excel", params);

Live example

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.

• 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.

Other specifics of exporting to Excel

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

• Some styles from Flexmonster themes or сustom CSS are not included in the exported Excel file.
• 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.

More configs for CSV export

When exporting the report to CSV, you can additionally configure the following:

• Whether to enclose all CSV fields in quotes using the alwaysEnclose property
• Field separator

Note If you export a chart view to CSV, the grid view will be exported instead.

See an example:

const params = {
  alwaysEnclose: true,
  fieldSeparator: ";",
};

pivot.exportTo("csv", params);

Live example

Advanced export

To customize how exported data is handled, set params.destinationType to "plain". As a result, the exported content is passed to the callbackHandler and can be modified, merged, or saved in any format you need.

For example, if you have multiple Flexmonster instances, you may want to export data from them into one file. Check out how to merge export results for a CSV export:

function doubleExportCsv() {

  // Export report from the 1st Flexmonster instance
  pivot1.exportTo(
    "csv",{
      destinationType: "plain"
    },
    csv1 => {

      // Export report from the 2nd Flexmonster instance
      pivot2.exportTo(
        "csv", {
          destinationType: "plain"
        },
        csv2 => {

          // Concat data from two reports into one
          const mergedCsv = csv1.data + "\n\n" + csv2.data;

          // Download the CSV file with two reports using the downloadjs library
          download(mergedCsv, "doubleInstances.csv", "text/csv")
        },
      );
    },
  );
}

Live example

Override the Export tab functionality

In Flexmonster, you can modify or override the functionality of the Export tab. For more details, see how to customize the tab functionality.

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.

See also

• Saving and restoring the report
• Sharing the report
• Printing the report
• Defining a format for date and time