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.

To see different examples of exporting the report, visit our Examples page.

In this guide, you will learn how to:

• Export the report via UI
• Export the report programmatically
  • Export to Excel
  • Export to PDF
  • Export to CSV
  • Export to HTML
  • Export to an image
  • Export to the server without using a browser

Note 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, or flat.
• Chart view: see available chart types.
• Drill-through view.

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.

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() to "excel". The 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.

This is how to save a 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.

Saving to the server:

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

flexmonster.exportTo('excel', params); 

Export to PDF

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:

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

Saving to server:

const 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) {
    let pdf = res.data;
    pdf.addPage();
    pdf.text('Hello world!', 10, 10);
    pdf.save(res.filename);
  }
); 

Open on JSFiddle.

Setting TTF font file:

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

CDN fonts for PDF export

Export to CSV

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:

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

Export to HTML

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:

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

Export to an image

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:

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

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. 

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 packages 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:

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