Need a special offer?Find out if your project fits.
+
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:

    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/Type Description
    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. See an example on JSFiddle.
    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 (maximum 10 columns). This ensures that the header is always visible to a user.
    See an example on JSFiddle.
    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 (maximum 10 columns). This ensures that the footer is always visible to a user.
    See an example on JSFiddle.
    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
    };

    flexmonster.exportTo("excel", params);

    Check out an example on JSFiddle.

    2) Saving to the server:

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

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

    See the example on JSFiddle.

    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/Type Description
    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. See an example on JSFiddle.
    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.
    See an example on JSFiddle.
    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.
    See an example on JSFiddle.
    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"
    };

    flexmonster.exportTo("pdf", params);

    Check out the example on JSFiddle.

    2) Saving to server:

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

    flexmonster.exportTo("pdf", params);

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

    See the example on JSFiddle.

    4) Setting TTF font file:

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

    Try a live sample on JSFiddle.

    CDN fonts for PDF 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

    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/Type Description
    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. See an example on JSFiddle.
    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".
    See an example on JSFiddle.
    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".
    See an example on JSFiddle.
    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",
    };

    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() method to "html". The method's second parameter is an optional object that can contain the following properties:

    Property/Type Description
    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. See an example on JSFiddle.
    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.
    See an example on JSFiddle.
    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.
    See an example on JSFiddle.
    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>",
    };

    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() method to "image". The method's second parameter is an optional object that can contain the following properties:

    Property/Type Description
    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. See an example on JSFiddle.
    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.
    See an example on JSFiddle.
    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.
    See an example on JSFiddle.
    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>"
    };

    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:

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

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