Export and print

All current data from the grid or chart can be exported in 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.

The API call exportTo() is used for exporting and the API call print() is used for printing. To see different examples of exporting and printing, visit our Examples page.

• Print
• Export to HTML
• Export to CSV
• Export to Excel
• Export to an image
• Export to PDF
• How to export to the server without using a browser

Note In Flexmonster, you can also save and share your report.

Print

The printing of the contents of the grid or chart via the OS print manager can be configured with the following options object inside the print() call:

Below is an example with the header and footer properties:

var options = {
  header:"<div>##CURRENT-DATE##</div>",
  footer:"<div>##PAGE-NUMBER##</div>"
}
flexmonster.print(options); 

Check out how this sample works on JSFiddle.

Export to HTML

To export to HTML set the first parameter of exportTo() to "html". The second parameter is an optional object that can contain the following properties:

The third parameter of 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:

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

var params = {
  destinationType: 'server', 
  url: 'your server-side script' 
};
flexmonster.exportTo('html', params); 

Export to CSV

To export to CSV set the first parameter of exportTo() to "csv". The second parameter is an optional object that can contain the following properties:

The third parameter of 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:

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

var params = {
  destinationType: 'server',
  url: 'your server-side script'
};
flexmonster.exportTo('csv', params); 

Export to Excel

To export to Excel set the first parameter of exportTo() to "excel". The second parameter is an optional object that can contain the following properties:

The third parameter of 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:

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

var params = {
  destinationType: 'server',
  url: 'your server-side script' 
};
flexmonster.exportTo('excel', params); 

Export to an image

To export to an image set the first parameter of exportTo() to "image". The second parameter is an optional object that can contain the following properties:

The third parameter of 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:

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

var params = {
  destinationType: 'server',
  url: 'your server-side script'
};
flexmonster.exportTo('image', params); 

Export to PDF

To export to PDF set the first parameter of exportTo() to "pdf". The second parameter is an optional object that can contain the following properties:

The third parameter of 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:

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

var 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) {
    var 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

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 define a format for date and time
• How to add localization
• How to customize the appearance with CSS