Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    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.

    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:

    options optional – Object. Can contain the following print properties:

    • header (from v2.211) optional – String | HTML string. When setting the header in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML header is rendered in the browser and added as an image to the printed PDF file.
      Besides, you can use the ##CURRENT-DATE## and ##PAGE-NUMBER## tokens.
    • footer (from v2.211) optional – String | HTML string. When setting the footer in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML footer is rendered in the browser and added as an image to the printed PDF file.
      Besides, you can use the ##CURRENT-DATE## and ##PAGE-NUMBER## tokens.

    Below is an example with the header and footer parameters:

    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:

    • filename optional – String. The name of the created file. Default name: "pivotgrid".
    • destinationType optional – String. Defines where the component’s contents will be exported. The destination type can be the following:
      • "file" (default) – the component’s contents will be exported to a file to the local computer.
      • "server" – the component’s contents will be exported to the server (a server-side script is required). When exporting to a server, Flexmonster creates an XMLHttpRequest and sends it as a POST request.
      • "plain" – the component’s contents will be exported as a string and returned with callbackHandler.
    • footer (from v2.211) optional – String | HTML string. When setting the footer in the HTML string format, you can use tags, inline styles, and Base64 images. See an example on JSFiddle.
      Besides, you can use the ##CURRENT-DATE## token in the footer.
    • header (from v2.211) optional – String | HTML string. When setting the header in the HTML string format, you can use tags, inline styles, and Base64 images. See an example on JSFiddle.
      Besides, you can use the ##CURRENT-DATE## token in the header.
    • url optional – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

    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:

    • alwaysEnclose optional – Boolean. 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 optional – String. Defines the field separator to split each CSV row in the export file. Default separator: ,.
    • filename optional – String. The name of the created file. Default name: "pivot".
    • destinationType optional – String. Defines where the component’s contents will be exported. The destination type can be the following:
      • "file" (default) – the component’s contents will be exported to a file to the local computer.
      • "server" – the component’s contents will be exported to the server (a server-side script is required). When exporting to a server, Flexmonster creates an XMLHttpRequest and sends it as a POST request.
      • "plain" – the component’s contents will be exported as a string and returned with callbackHandler.
    • footer (from v2.7.24) optional – String. Specify the footer as a string (e.g., "Custom footer"). In addition, you can add a multirow footer by using the "\n" character: "Row1\nRow2\nRow3".
    • header (from v2.7.24 ) optional – String. Specify the header as a string (e.g., "Custom header"). In addition, you can add a multirow header by using the "\n" character: "Row1\nRow2\nRow3".
    • url optional – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

    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:

    • filename optional – String. The name of the created file. Default name: "pivot".
    • destinationType optional – String. Defines where the component’s contents will be exported. The destination type can be the following:
      • "file" (default) – the component’s contents will be exported to a file to the local computer.
      • "server" – the component’s contents will be exported to the server (a server-side script is required). When exporting to a server, Flexmonster creates an XMLHttpRequest and sends it as a POST request.
      • "plain" – the component’s contents will be exported as a Uint8Array and returned with callbackHandler.
    • excelSheetName (from v2.2) optional – String. Sets the sheet name.
    • footer (from v2.7.24) optional – String. Specify the footer as a string (e.g., "Custom footer"). In addition, you can add a multirow footer by using the "\n" character: "Row1\nRow2\nRow3".
    • header (from v2.7.24) optional – String. Specify the header as a string (e.g., "Custom header"). In addition, you can add a multirow header by using the "\n" character: "Row1\nRow2\nRow3".
    • showFilters (from v2.1) optional – Boolean. Indicates whether the filters info will be shown (true) in the exported Excel file or not (false). Default value: false.
    • url optional – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.
    • useOlapFormattingInExcel (from v2.2) optional – Boolean. 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 optional – Boolean. Specifies how cells modified by customizeCell are exported: as formatted strings (true) or as numbers without formatting (false). Default value: true.

    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:

    • filename optional – String. The name of the created file. Default name: "pivotgrid".
    • destinationType optional – String. Defines where the component’s contents will be exported. The destination type can be the following:
      • "file" (default) – the component’s contents will be exported to a file to the local computer.
      • "server" – the component’s contents will be exported to the server (a server-side script is required). When exporting to a server, Flexmonster creates an XMLHttpRequest and sends it as a POST request.
      • "plain" – the component’s contents will be exported as an HTMLCanvasElement and returned with callbackHandler.
    • footer (from v2.7.24) optional – String | HTML string. When setting the footer in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML footer is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.
      Besides, you can use the ##CURRENT-DATE## token in the footer.
    • header (from v2.7.24) optional – String | HTML string. When setting the header in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML header is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.
      Besides, you can use the ##CURRENT-DATE## token in the header.
    • url optional – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

    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:

    • filename optional – String. The name of the created file. Default name: "pivot".
    • destinationType optional – String. Defines where the component’s contents will be exported. The destination type can be the following:
      • "file" (default) – the component’s contents will be exported to a file to the local computer.
      • "server" – the component’s contents will be exported to the server (a server-side script is required). When exporting to a server, Flexmonster creates an XMLHttpRequest and sends it as a POST request.
      • "plain" – this destination type allows you to modify the generated PDF file. The component’s contents will be exported to a jsPDF object and returned with the callbackHandler. jsPDF is a library that generates PDFs using client-side JavaScript. After exporting from Flexmonster, the jsPDF object can be modified using the jsPDF API and then saved. See an example.
    • fontUrl (from v2.7.7) optional – String. 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.
    • footer (from v2.211) optional – String | HTML string. When setting the footer in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML footer is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.
      Besides, you can use the ##CURRENT-DATE## and ##PAGE-NUMBER## tokens in the footer.
    • header (from v2.211) optional – String | HTML string. When setting the header in the HTML string format, you can use tags, inline styles, and Base64 images. The HTML header is rendered in the browser and added as an image to the exported file. See an example on JSFiddle.
      Besides, you can use the ##CURRENT-DATE## and ##PAGE-NUMBER## tokens in the header.
    • pageFormat optional – String. Defines the page format for the PDF file. The following sizes are available: "A0", "A1", "A2", "A3", "A4", "A5". Default value: "A4".
    • pageOrientation optional – String. Defines the page orientation for the PDF file. Page orientation can be either "portrait" or "landscape". Default value: "portrait".
    • url optional – String. To save the file to the server, provide the component with a path to the server-side script that can save this file.

    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 export

    Expand the list of Google Noto Fonts
    Language URL
    582 languages https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf
    Adlam https://cdn.flexmonster.com/fonts/NotoSansAdlam-Regular.ttf
    Adlam Unjoined https://cdn.flexmonster.com/fonts/NotoSansAdlamUnjoined-Regular.ttf
    Anatolian Hieroglyphs https://cdn.flexmonster.com/fonts/NotoSansAnatolianHieroglyphs-Regular.ttf
    Arabic https://cdn.flexmonster.com/fonts/NotoSansArabic-Regular.ttf
    Arabic UI https://cdn.flexmonster.com/fonts/NotoSansArabicUI-Regular.ttf
    Armenian https://cdn.flexmonster.com/fonts/NotoSansArmenian-Regular.ttf
    Avestan https://cdn.flexmonster.com/fonts/NotoSansAvestan-Regular.ttf
    Balinese https://cdn.flexmonster.com/fonts/NotoSansBalinese-Regular.ttf
    Bamum https://cdn.flexmonster.com/fonts/NotoSansBamum-Regular.ttf
    Batak https://cdn.flexmonster.com/fonts/NotoSansBatak-Regular.ttf
    Bengali https://cdn.flexmonster.com/fonts/NotoSansBengali-Regular.ttf
    Bengali UI https://cdn.flexmonster.com/fonts/NotoSansBengaliUI-Regular.ttf
    Brahmi https://cdn.flexmonster.com/fonts/NotoSansBrahmi-Regular.ttf
    Buginese https://cdn.flexmonster.com/fonts/NotoSansBuginese-Regular.ttf
    Buhid https://cdn.flexmonster.com/fonts/NotoSansBuhid-Regular.ttf
    Japanese https://cdn.flexmonster.com/fonts/NotoSansCJKjp-Regular.ttf
    Korean https://cdn.flexmonster.com/fonts/NotoSansCJKkr-Regular.ttf
    Simplified Chinese https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf
    Traditional Chinese https://cdn.flexmonster.com/fonts/NotoSansCJKtc-Regular.ttf
    Canadian Aboriginal https://cdn.flexmonster.com/fonts/NotoSansCanadianAboriginal-Regular.ttf
    Carian https://cdn.flexmonster.com/fonts/NotoSansCarian-Regular.ttf
    Chakma https://cdn.flexmonster.com/fonts/NotoSansChakma-Regular.ttf
    Cham https://cdn.flexmonster.com/fonts/NotoSansCham-Regular.ttf
    Cherokee https://cdn.flexmonster.com/fonts/NotoSansCherokee-Regular.ttf
    Coptic https://cdn.flexmonster.com/fonts/NotoSansCoptic-Regular.ttf
    Cuneiform https://cdn.flexmonster.com/fonts/NotoSansCuneiform-Regular.ttf
    Cypriot https://cdn.flexmonster.com/fonts/NotoSansCypriot-Regular.ttf
    Deseret https://cdn.flexmonster.com/fonts/NotoSansDeseret-Regular.ttf
    Devanagari https://cdn.flexmonster.com/fonts/NotoSansDevanagari-Regular.ttf
    Devanagar iUI https://cdn.flexmonster.com/fonts/NotoSansDevanagariUI-Regular.ttf
    Display https://cdn.flexmonster.com/fonts/NotoSansDisplay-Regular.ttf
    Egyptian Hieroglyphs https://cdn.flexmonster.com/fonts/NotoSansEgyptianHieroglyphs-Regular.ttf
    Ethiopic https://cdn.flexmonster.com/fonts/NotoSansEthiopic-Regular.ttf
    Georgian https://cdn.flexmonster.com/fonts/NotoSansGeorgian-Regular.ttf
    Glagolitic https://cdn.flexmonster.com/fonts/NotoSansGlagolitic-Regular.ttf
    Gothic https://cdn.flexmonster.com/fonts/NotoSansGothic-Regular.ttf
    Gujarati https://cdn.flexmonster.com/fonts/NotoSansGujarati-Regular.ttf
    Gujarati UI https://cdn.flexmonster.com/fonts/NotoSansGujaratiUI-Regular.ttf
    Gurmukhi https://cdn.flexmonster.com/fonts/NotoSansGurmukhi-Regular.ttf
    Gurmukhi UI https://cdn.flexmonster.com/fonts/NotoSansGurmukhiUI-Regular.ttf
    Hanunoo https://cdn.flexmonster.com/fonts/NotoSansHanunoo-Regular.ttf
    Hebrew https://cdn.flexmonster.com/fonts/NotoSansHebrew-Regular.ttf
    Imperial Aramaic https://cdn.flexmonster.com/fonts/NotoSansImperialAramaic-Regular.ttf
    Inscriptional Pahlavi https://cdn.flexmonster.com/fonts/NotoSansInscriptionalPahlavi-Regular.ttf
    Inscriptional Parthian https://cdn.flexmonster.com/fonts/NotoSansInscriptionalParthian-Regular.ttf
    Javanese https://cdn.flexmonster.com/fonts/NotoSansJavanese-Regular.ttf
    Kaithi https://cdn.flexmonster.com/fonts/NotoSansKaithi-Regular.ttf
    Kannada https://cdn.flexmonster.com/fonts/NotoSansKannada-Regular.ttf
    Kannada UI https://cdn.flexmonster.com/fonts/NotoSansKannadaUI-Regular.ttf
    Kayah Li https://cdn.flexmonster.com/fonts/NotoSansKayahLi-Regular.ttf
    Kharoshthi https://cdn.flexmonster.com/fonts/NotoSansKharoshthi-Regular.ttf
    Khmer https://cdn.flexmonster.com/fonts/NotoSansKhmer-Regular.ttf
    Khmer UI https://cdn.flexmonster.com/fonts/NotoSansKhmerUI-Regular.ttf
    Lao https://cdn.flexmonster.com/fonts/NotoSansLao-Regular.ttf
    Lao UI https://cdn.flexmonster.com/fonts/NotoSansLaoUI-Regular.ttf
    Lepcha https://cdn.flexmonster.com/fonts/NotoSansLepcha-Regular.ttf
    Limbu https://cdn.flexmonster.com/fonts/NotoSansLimbu-Regular.ttf
    Linear B https://cdn.flexmonster.com/fonts/NotoSansLinearB-Regular.ttf
    Lisu https://cdn.flexmonster.com/fonts/NotoSansLisu-Regular.ttf
    Lycian https://cdn.flexmonster.com/fonts/NotoSansLycian-Regular.ttf
    Lydian https://cdn.flexmonster.com/fonts/NotoSansLydian-Regular.ttf
    Malayalam https://cdn.flexmonster.com/fonts/NotoSansMalayalam-Regular.ttf
    Malayalam UI https://cdn.flexmonster.com/fonts/NotoSansMalayalamUI-Regular.ttf
    Mandaic https://cdn.flexmonster.com/fonts/NotoSansMandaic-Regular.ttf
    Meetei Mayek https://cdn.flexmonster.com/fonts/NotoSansMeeteiMayek-Regular.ttf
    Mongolian https://cdn.flexmonster.com/fonts/NotoSansMongolian-Regular.ttf
    Myanmar https://cdn.flexmonster.com/fonts/NotoSansMyanmar-Regular.ttf
    Myanmar UI https://cdn.flexmonster.com/fonts/NotoSansMyanmarUI-Regular.ttf
    N’Ko https://cdn.flexmonster.com/fonts/NotoSansNKo-Regular.ttf
    New Tai Lue https://cdn.flexmonster.com/fonts/NotoSansNewTaiLue-Regular.ttf
    Ogham https://cdn.flexmonster.com/fonts/NotoSansOgham-Regular.ttf
    Ol Chiki https://cdn.flexmonster.com/fonts/NotoSansOlChiki-Regular.ttf
    Old Italic https://cdn.flexmonster.com/fonts/NotoSansOldItalic-Regular.ttf
    Old Persian https://cdn.flexmonster.com/fonts/NotoSansOldPersian-Regular.ttf
    Old South Arabian https://cdn.flexmonster.com/fonts/NotoSansOldSouthArabian-Regular.ttf
    Old Turkic https://cdn.flexmonster.com/fonts/NotoSansOldTurkic-Regular.ttf
    Oriya https://cdn.flexmonster.com/fonts/NotoSansOriya-Regular.ttf
    Oriya UI https://cdn.flexmonster.com/fonts/NotoSansOriyaUI-Regular.ttf
    Osage https://cdn.flexmonster.com/fonts/NotoSansOsage-Regular.ttf
    Osmanya https://cdn.flexmonster.com/fonts/NotoSansOsmanya-Regular.ttf
    Phags-pa https://cdn.flexmonster.com/fonts/NotoSansPhagsPa-Regular.ttf
    Phoenician https://cdn.flexmonster.com/fonts/NotoSansPhoenician-Regular.ttf
    Rejang https://cdn.flexmonster.com/fonts/NotoSansRejang-Regular.ttf
    Runic https://cdn.flexmonster.com/fonts/NotoSansRunic-Regular.ttf
    Samaritan https://cdn.flexmonster.com/fonts/NotoSansSamaritan-Regular.ttf
    Saurashtra https://cdn.flexmonster.com/fonts/NotoSansSaurashtra-Regular.ttf
    Shavian https://cdn.flexmonster.com/fonts/NotoSansShavian-Regular.ttf
    Sinhala https://cdn.flexmonster.com/fonts/NotoSansSinhala-Regular.ttf
    Sinhala UI https://cdn.flexmonster.com/fonts/NotoSansSinhalaUI-Regular.ttf
    Sundanese https://cdn.flexmonster.com/fonts/NotoSansSundanese-Regular.ttf
    Syloti Nagri https://cdn.flexmonster.com/fonts/NotoSansSylotiNagri-Regular.ttf
    Symbols https://cdn.flexmonster.com/fonts/NotoSansSymbols-Regular.ttf
    Symbols2 https://cdn.flexmonster.com/fonts/NotoSansSymbols2-Regular.ttf
    Syriac Eastern https://cdn.flexmonster.com/fonts/NotoSansSyriacEastern-Regular.ttf
    Syriac Estrangela https://cdn.flexmonster.com/fonts/NotoSansSyriacEstrangela-Regular.ttf
    Syriac Western https://cdn.flexmonster.com/fonts/NotoSansSyriacWestern-Regular.ttf
    Tagalog https://cdn.flexmonster.com/fonts/NotoSansTagalog-Regular.ttf
    Tagbanwa https://cdn.flexmonster.com/fonts/NotoSansTagbanwa-Regular.ttf
    Tai Le https://cdn.flexmonster.com/fonts/NotoSansTaiLe-Regular.ttf
    Tai Tham https://cdn.flexmonster.com/fonts/NotoSansTaiTham-Regular.ttf
    Tai Viet https://cdn.flexmonster.com/fonts/NotoSansTaiViet-Regular.ttf
    Tamil https://cdn.flexmonster.com/fonts/NotoSansTamil-Regular.ttf
    Tamil UI https://cdn.flexmonster.com/fonts/NotoSansTamilUI-Regular.ttf
    Telugu https://cdn.flexmonster.com/fonts/NotoSansTelugu-Regular.ttf
    Telugu UI https://cdn.flexmonster.com/fonts/NotoSansTeluguUI-Regular.ttf
    Thaana https://cdn.flexmonster.com/fonts/NotoSansThaana-Regular.ttf
    Thai https://cdn.flexmonster.com/fonts/NotoSansThai-Regular.ttf
    Thai UI https://cdn.flexmonster.com/fonts/NotoSansThaiUI-Regular.ttf
    Tibetan https://cdn.flexmonster.com/fonts/NotoSansTibetan-Regular.ttf
    Tifinagh https://cdn.flexmonster.com/fonts/NotoSansTifinagh-Regular.ttf
    Ugaritic https://cdn.flexmonster.com/fonts/NotoSansUgaritic-Regular.ttf
    Vai https://cdn.flexmonster.com/fonts/NotoSansVai-Regular.ttf
    Yi https://cdn.flexmonster.com/fonts/NotoSansYi-Regular.ttf

    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. To run the sample project, follow these steps:

    1. Download the .zip archive with the sample or clone it from GitHub with the following command:
      git clone https://github.com/flexmonster/pivot-puppeteer
      cd pivot-puppeteer
    2. Install the npm packages described in package.json:
      npm install 
    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:

    index.html

    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.

    pivot.js

    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 add other Flexmonster events 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.

    What’s next?

    You may be interested in the following articles: