We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • 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:

    Property/TypeDescription
    filename
    String
    optional The name of the created file.
    Default name: "pivot".
    destinationType
    String
    optional It defines where the component's contents will be exported. The destinationType can have the following values:
    • "file" — contents are exported as a file to a user's device.
    • "server" — contents are exported as a file to the server-side script specified in the url property. Flexmonster creates an XMLHttpRequest with the exported file and sends it as a POST request to the server-side script.
    • "plain" — contents are passed as an Uint8Array to the callbackHandler in the result.data property. Note that the contents must be saved manually.
      Use the "plain" destination type to have full control over how the contents are exported Live example.
    Default value: "file".
    excelSheetName
    String
    optional Sets the sheet name.
    header
    String
    optional String that will be displayed in the header section of the exported file. You can also add a multirow header using the "\n" character: "Row1\nRow2\nRow3".
    A cell with the header spans multiple columns in the exported Excel file, with a maximum of 10 columns. This ensures that the header is always visible to a user.
    Live example
    footer
    String
    optional String that will be displayed in the footer section of the exported file. You can also add a multirow footer using the "\n" character: "Row1\nRow2\nRow3".
    A cell with the footer spans multiple columns in the exported Excel file, with a maximum of 10 columns. This ensures that the footer is always visible to a user.
    Live example
    showFilters
    Boolean
    optional Indicates whether the exported file should list all filtered fields (true) or filtered fields only from report filters (false).
    If there are no fields in report filters, this property is ignored.
    Default value: false.
    requestHeaders
    Object
    optional It allows adding custom request headers when the destinationType property is "server". The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value.
    url
    String
    optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server".
    useOlapFormattingInExcel
    Boolean
    optional 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
    Boolean
    optional Indicates whether cells modified by customizeCell() are exported as formatted strings (true) or as numbers without formatting (false). Learn more about how the modified cells are displayed in the exported file.
    Default value: true.

    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:

    Property/TypeDescription
    filename
    String
    optional The name of the created file.
    Default name: "pivot".
    destinationType
    String
    optional It defines where the component's contents will be exported. The destinationType can have the following values:
    • "file" — contents are exported as a file to a user's device.
    • "server" — contents are exported as a file to the server-side script specified in the url property. Flexmonster creates an XMLHttpRequest with the exported file and sends it as a POST request to the server-side script.
    • "plain" — contents are passed as a jsPDF object to the callbackHandler in the result.data property. Note that the contents must be saved manually. You can modify the contents using jsPDF API before saving it.
      Use the "plain" destination type to have full control over how the contents are exported Live example.
    Default value: "file".
    fontUrl
    String
    optional 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.
    header
    String | HTML string
    optional String that will be displayed in the header section of the exported file. You can set the header as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.
    When setting the header, you can use the following tokens in the string:
    • ##CURRENT-DATE## — displays the date when the exported file was created.
    • ##PAGE-NUMBER## — displays the page numbers in the exported file starting from 1.
    Live example
    footer
    String | HTML string
    optional String that will be displayed in the footer section of the exported file. You can set the footer as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.
    When setting the footer, you can use the following tokens in the string:
    • ##CURRENT-DATE## — displays the date when the exported file was created.
    • ##PAGE-NUMBER## — displays the page numbers in the exported file starting from 1.
    Live example
    pageFormat
    String
    optional Defines the page format for the PDF file. The following sizes are available: "A0", "A1", "A2", "A3", "A4", "A5".
    Default value: "A4".
    pageOrientation
    String
    optional Defines the page orientation for the PDF file. Page orientation can be either "portrait" or "landscape".
    Default value: "portrait".
    requestHeaders
    Object
    optional It allows adding custom request headers when the destinationType property is "server". The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value.
    url
    String
    optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server".
    useCustomizeCellForData
    Boolean
    optional Indicates whether cells modified by customizeCell() are exported as formatted strings (true) or as numbers without formatting (false). Learn more about how the modified cells are displayed in the exported file.
    Default value: true.

    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

    Expand the list of Google Noto Fonts
    LanguageURL
    582 languageshttps://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf
    Adlamhttps://cdn.flexmonster.com/fonts/NotoSansAdlam-Regular.ttf
    Adlam Unjoinedhttps://cdn.flexmonster.com/fonts/NotoSansAdlamUnjoined-Regular.ttf
    Anatolian Hieroglyphshttps://cdn.flexmonster.com/fonts/NotoSansAnatolianHieroglyphs-Regular.ttf
    Arabichttps://cdn.flexmonster.com/fonts/NotoSansArabic-Regular.ttf
    Arabic UIhttps://cdn.flexmonster.com/fonts/NotoSansArabicUI-Regular.ttf
    Armenianhttps://cdn.flexmonster.com/fonts/NotoSansArmenian-Regular.ttf
    Avestanhttps://cdn.flexmonster.com/fonts/NotoSansAvestan-Regular.ttf
    Balinesehttps://cdn.flexmonster.com/fonts/NotoSansBalinese-Regular.ttf
    Bamumhttps://cdn.flexmonster.com/fonts/NotoSansBamum-Regular.ttf
    Batakhttps://cdn.flexmonster.com/fonts/NotoSansBatak-Regular.ttf
    Bengalihttps://cdn.flexmonster.com/fonts/NotoSansBengali-Regular.ttf
    Bengali UIhttps://cdn.flexmonster.com/fonts/NotoSansBengaliUI-Regular.ttf
    Brahmihttps://cdn.flexmonster.com/fonts/NotoSansBrahmi-Regular.ttf
    Buginesehttps://cdn.flexmonster.com/fonts/NotoSansBuginese-Regular.ttf
    Buhidhttps://cdn.flexmonster.com/fonts/NotoSansBuhid-Regular.ttf
    Japanesehttps://cdn.flexmonster.com/fonts/NotoSansCJKjp-Regular.ttf
    Koreanhttps://cdn.flexmonster.com/fonts/NotoSansCJKkr-Regular.ttf
    Simplified Chinesehttps://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf
    Traditional Chinesehttps://cdn.flexmonster.com/fonts/NotoSansCJKtc-Regular.ttf
    Canadian Aboriginalhttps://cdn.flexmonster.com/fonts/NotoSansCanadianAboriginal-Regular.ttf
    Carianhttps://cdn.flexmonster.com/fonts/NotoSansCarian-Regular.ttf
    Chakmahttps://cdn.flexmonster.com/fonts/NotoSansChakma-Regular.ttf
    Chamhttps://cdn.flexmonster.com/fonts/NotoSansCham-Regular.ttf
    Cherokeehttps://cdn.flexmonster.com/fonts/NotoSansCherokee-Regular.ttf
    Coptichttps://cdn.flexmonster.com/fonts/NotoSansCoptic-Regular.ttf
    Cuneiformhttps://cdn.flexmonster.com/fonts/NotoSansCuneiform-Regular.ttf
    Cypriothttps://cdn.flexmonster.com/fonts/NotoSansCypriot-Regular.ttf
    Deserethttps://cdn.flexmonster.com/fonts/NotoSansDeseret-Regular.ttf
    Devanagarihttps://cdn.flexmonster.com/fonts/NotoSansDevanagari-Regular.ttf
    Devanagar iUIhttps://cdn.flexmonster.com/fonts/NotoSansDevanagariUI-Regular.ttf
    Displayhttps://cdn.flexmonster.com/fonts/NotoSansDisplay-Regular.ttf
    Egyptian Hieroglyphshttps://cdn.flexmonster.com/fonts/NotoSansEgyptianHieroglyphs-Regular.ttf
    Ethiopichttps://cdn.flexmonster.com/fonts/NotoSansEthiopic-Regular.ttf
    Georgianhttps://cdn.flexmonster.com/fonts/NotoSansGeorgian-Regular.ttf
    Glagolitichttps://cdn.flexmonster.com/fonts/NotoSansGlagolitic-Regular.ttf
    Gothichttps://cdn.flexmonster.com/fonts/NotoSansGothic-Regular.ttf
    Gujaratihttps://cdn.flexmonster.com/fonts/NotoSansGujarati-Regular.ttf
    Gujarati UIhttps://cdn.flexmonster.com/fonts/NotoSansGujaratiUI-Regular.ttf
    Gurmukhihttps://cdn.flexmonster.com/fonts/NotoSansGurmukhi-Regular.ttf
    Gurmukhi UIhttps://cdn.flexmonster.com/fonts/NotoSansGurmukhiUI-Regular.ttf
    Hanunoohttps://cdn.flexmonster.com/fonts/NotoSansHanunoo-Regular.ttf
    Hebrewhttps://cdn.flexmonster.com/fonts/NotoSansHebrew-Regular.ttf
    Imperial Aramaichttps://cdn.flexmonster.com/fonts/NotoSansImperialAramaic-Regular.ttf
    Inscriptional Pahlavihttps://cdn.flexmonster.com/fonts/NotoSansInscriptionalPahlavi-Regular.ttf
    Inscriptional Parthianhttps://cdn.flexmonster.com/fonts/NotoSansInscriptionalParthian-Regular.ttf
    Javanesehttps://cdn.flexmonster.com/fonts/NotoSansJavanese-Regular.ttf
    Kaithihttps://cdn.flexmonster.com/fonts/NotoSansKaithi-Regular.ttf
    Kannadahttps://cdn.flexmonster.com/fonts/NotoSansKannada-Regular.ttf
    Kannada UIhttps://cdn.flexmonster.com/fonts/NotoSansKannadaUI-Regular.ttf
    Kayah Lihttps://cdn.flexmonster.com/fonts/NotoSansKayahLi-Regular.ttf
    Kharoshthihttps://cdn.flexmonster.com/fonts/NotoSansKharoshthi-Regular.ttf
    Khmerhttps://cdn.flexmonster.com/fonts/NotoSansKhmer-Regular.ttf
    Khmer UIhttps://cdn.flexmonster.com/fonts/NotoSansKhmerUI-Regular.ttf
    Laohttps://cdn.flexmonster.com/fonts/NotoSansLao-Regular.ttf
    Lao UIhttps://cdn.flexmonster.com/fonts/NotoSansLaoUI-Regular.ttf
    Lepchahttps://cdn.flexmonster.com/fonts/NotoSansLepcha-Regular.ttf
    Limbuhttps://cdn.flexmonster.com/fonts/NotoSansLimbu-Regular.ttf
    Linear Bhttps://cdn.flexmonster.com/fonts/NotoSansLinearB-Regular.ttf
    Lisuhttps://cdn.flexmonster.com/fonts/NotoSansLisu-Regular.ttf
    Lycianhttps://cdn.flexmonster.com/fonts/NotoSansLycian-Regular.ttf
    Lydianhttps://cdn.flexmonster.com/fonts/NotoSansLydian-Regular.ttf
    Malayalamhttps://cdn.flexmonster.com/fonts/NotoSansMalayalam-Regular.ttf
    Malayalam UIhttps://cdn.flexmonster.com/fonts/NotoSansMalayalamUI-Regular.ttf
    Mandaichttps://cdn.flexmonster.com/fonts/NotoSansMandaic-Regular.ttf
    Meetei Mayekhttps://cdn.flexmonster.com/fonts/NotoSansMeeteiMayek-Regular.ttf
    Mongolianhttps://cdn.flexmonster.com/fonts/NotoSansMongolian-Regular.ttf
    Myanmarhttps://cdn.flexmonster.com/fonts/NotoSansMyanmar-Regular.ttf
    Myanmar UIhttps://cdn.flexmonster.com/fonts/NotoSansMyanmarUI-Regular.ttf
    N'Kohttps://cdn.flexmonster.com/fonts/NotoSansNKo-Regular.ttf
    New Tai Luehttps://cdn.flexmonster.com/fonts/NotoSansNewTaiLue-Regular.ttf
    Oghamhttps://cdn.flexmonster.com/fonts/NotoSansOgham-Regular.ttf
    Ol Chikihttps://cdn.flexmonster.com/fonts/NotoSansOlChiki-Regular.ttf
    Old Italichttps://cdn.flexmonster.com/fonts/NotoSansOldItalic-Regular.ttf
    Old Persianhttps://cdn.flexmonster.com/fonts/NotoSansOldPersian-Regular.ttf
    Old South Arabianhttps://cdn.flexmonster.com/fonts/NotoSansOldSouthArabian-Regular.ttf
    Old Turkichttps://cdn.flexmonster.com/fonts/NotoSansOldTurkic-Regular.ttf
    Oriyahttps://cdn.flexmonster.com/fonts/NotoSansOriya-Regular.ttf
    Oriya UIhttps://cdn.flexmonster.com/fonts/NotoSansOriyaUI-Regular.ttf
    Osagehttps://cdn.flexmonster.com/fonts/NotoSansOsage-Regular.ttf
    Osmanyahttps://cdn.flexmonster.com/fonts/NotoSansOsmanya-Regular.ttf
    Phags-pahttps://cdn.flexmonster.com/fonts/NotoSansPhagsPa-Regular.ttf
    Phoenicianhttps://cdn.flexmonster.com/fonts/NotoSansPhoenician-Regular.ttf
    Rejanghttps://cdn.flexmonster.com/fonts/NotoSansRejang-Regular.ttf
    Runichttps://cdn.flexmonster.com/fonts/NotoSansRunic-Regular.ttf
    Samaritanhttps://cdn.flexmonster.com/fonts/NotoSansSamaritan-Regular.ttf
    Saurashtrahttps://cdn.flexmonster.com/fonts/NotoSansSaurashtra-Regular.ttf
    Shavianhttps://cdn.flexmonster.com/fonts/NotoSansShavian-Regular.ttf
    Sinhalahttps://cdn.flexmonster.com/fonts/NotoSansSinhala-Regular.ttf
    Sinhala UIhttps://cdn.flexmonster.com/fonts/NotoSansSinhalaUI-Regular.ttf
    Sundanesehttps://cdn.flexmonster.com/fonts/NotoSansSundanese-Regular.ttf
    Syloti Nagrihttps://cdn.flexmonster.com/fonts/NotoSansSylotiNagri-Regular.ttf
    Symbolshttps://cdn.flexmonster.com/fonts/NotoSansSymbols-Regular.ttf
    Symbols2https://cdn.flexmonster.com/fonts/NotoSansSymbols2-Regular.ttf
    Syriac Easternhttps://cdn.flexmonster.com/fonts/NotoSansSyriacEastern-Regular.ttf
    Syriac Estrangelahttps://cdn.flexmonster.com/fonts/NotoSansSyriacEstrangela-Regular.ttf
    Syriac Westernhttps://cdn.flexmonster.com/fonts/NotoSansSyriacWestern-Regular.ttf
    Tagaloghttps://cdn.flexmonster.com/fonts/NotoSansTagalog-Regular.ttf
    Tagbanwahttps://cdn.flexmonster.com/fonts/NotoSansTagbanwa-Regular.ttf
    Tai Lehttps://cdn.flexmonster.com/fonts/NotoSansTaiLe-Regular.ttf
    Tai Thamhttps://cdn.flexmonster.com/fonts/NotoSansTaiTham-Regular.ttf
    Tai Viethttps://cdn.flexmonster.com/fonts/NotoSansTaiViet-Regular.ttf
    Tamilhttps://cdn.flexmonster.com/fonts/NotoSansTamil-Regular.ttf
    Tamil UIhttps://cdn.flexmonster.com/fonts/NotoSansTamilUI-Regular.ttf
    Teluguhttps://cdn.flexmonster.com/fonts/NotoSansTelugu-Regular.ttf
    Telugu UIhttps://cdn.flexmonster.com/fonts/NotoSansTeluguUI-Regular.ttf
    Thaanahttps://cdn.flexmonster.com/fonts/NotoSansThaana-Regular.ttf
    Thaihttps://cdn.flexmonster.com/fonts/NotoSansThai-Regular.ttf
    Thai UIhttps://cdn.flexmonster.com/fonts/NotoSansThaiUI-Regular.ttf
    Tibetanhttps://cdn.flexmonster.com/fonts/NotoSansTibetan-Regular.ttf
    Tifinaghhttps://cdn.flexmonster.com/fonts/NotoSansTifinagh-Regular.ttf
    Ugaritichttps://cdn.flexmonster.com/fonts/NotoSansUgaritic-Regular.ttf
    Vaihttps://cdn.flexmonster.com/fonts/NotoSansVai-Regular.ttf
    Yihttps://cdn.flexmonster.com/fonts/NotoSansYi-Regular.ttf

    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:

    Property/TypeDescription
    alwaysEnclose
    Boolean
    optional 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
    String
    optional Defines the field separator to split each CSV row in the export file.
    Default separator: ,.
    filename
    String
    optional The name of the created file.
    Default name: "pivot".
    destinationType
    String
    optional It defines where the component's contents will be exported. The destinationType can have the following values:
    • "file" — contents are exported as a file to a user's device.
    • "server" — contents are exported as a file to the server-side script specified in the url property. Flexmonster creates an XMLHttpRequest with the exported file and sends it as a POST request to the server-side script.
    • "plain" — contents are passed as a String to the callbackHandler in the result.data property. Note that the contents must be saved manually.
      Use the "plain" destination type to have full control over how the contents are exported Live example.
    Default value: "file".
    header
    String
    optional String that will be displayed in the header section of the exported file. You can also add a multirow header using the "\n" character: "Row1\nRow2\nRow3".
    Live example
    footer
    String
    optional String that will be displayed in the footer section of the exported file. You can also add a multirow footer using the "\n" character: "Row1\nRow2\nRow3".
    Live example
    requestHeaders
    Object
    optional It allows adding custom request headers when the destinationType property is "server". The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value.
    url
    String
    optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server".
    useCustomizeCellForData
    Boolean
    optional Indicates whether cells modified by customizeCell() are exported as formatted strings (true) or as numbers without formatting (false). Learn more about how the modified cells are displayed in the exported file.
    Default value: true.

    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:

    Property/TypeDescription
    filename
    String
    optional The name of the created file.
    Default name: "pivotgrid".
    destinationType
    String
    optional It defines where the component's contents will be exported. The destinationType can have the following values:
    • "file" — contents are exported as a file to a user's device.
    • "server" — contents are exported as a file to the server-side script specified in the url property. Flexmonster creates an XMLHttpRequest with the exported file and sends it as a POST request to the server-side script.
    • "plain" — contents are passed as a String to the callbackHandler in the result.data property. Note that the content must be saved manually.
      Use the "plain" destination type to have full control over how the contents are exported Live example.
    Default value: "file".
    header
    String | HTML string
    optional String that will be displayed in the header section of the exported file. You can set the header as a regular string or as an HTML string with tags, inline styles, and Base64 images.
    When setting the header, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.
    Live example
    footer
    String | HTML string
    optional String that will be displayed in the footer section of the exported file. You can set the footer as a regular string or as an HTML string with tags, inline styles, and Base64 images.
    When setting the footer, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.
    Live example
    requestHeaders
    Object
    optional It allows adding custom request headers when the destinationType property is "server". The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value.
    url
    String
    optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server".
    useCustomizeCellForData
    Boolean
    optional Indicates whether cells modified by customizeCell() are exported as formatted strings (true) or as numbers without formatting (false). Learn more about how the modified cells are displayed in the exported file.
    Default value: true.

    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:

    Property/TypeDescription
    filename
    String
    optional The name of the created file.
    Default name: "pivotgrid".
    destinationType
    String
    optional It defines where the component's contents will be exported. The destinationType can have the following values:
    • "file" — contents are exported as a file to a user's device.
    • "server" — contents are exported as a file to the server-side script specified in the url property. Flexmonster creates an XMLHttpRequest with the exported file and sends it as a POST request to the server-side script.
    • "plain" — contents are passed as an HTMLCanvasElement to the callbackHandler in the result.data property. Note that the contents must be saved manually.
      Use the "plain" destination type to have full control over how the contents are exported Live example.
    Default value: "file".
    header
    String | HTML string
    optional String that will be displayed in the header section of the exported file. You can set the header as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.
    When setting the header, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.
    Live example
    footer
    String | HTML string
    optional String that will be displayed in the footer section of the exported file. You can set the footer as a regular string or as an HTML string with tags, inline styles, and Base64 images. The string is rendered in the browser and added as an image to the exported file.
    When setting the footer, you can use the ##CURRENT-DATE## token in the string. The token displays the date when the exported file was created.
    Live example
    requestHeaders
    Object
    optional It allows adding custom request headers when the destinationType property is "server". The object consists of "key": "value" pairs, where "key" is a header name and "value" is its value.
    url
    String
    optional A path to a server-side script that can save the file. The url property is required when the destinationType property is "server".

    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:

    CDN version

    Get the sample project where Flexmonster is included from CDN:

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

    npm package version

    Get the sample project where Flexmonster is included from npm:

    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:

    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 modify the event handlers to add new functionality, such as scheduled sending of the exported report via email. Other Flexmonster events can be added 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.

    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 so the exported report file is not corrupted.

    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: