Export reports from multiple Flexmonster instances into one file

Export and print

by Flexmonster Pivot Table

HTML

<!-- Flexmonster Pivot Table & Charts-->
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<!-- downloadjs library -->
<!-- For downloading files -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- xlsx library -->
<!-- For merging and downloading Excel files -->
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.min.js"
  integrity="sha512-W/mRQs9ZSFpF14X/4aRgQss7+HRsVXsph+Y6DGLeqIqK8IpO+rQz0ISUEXkTeeKF7tivoGv+Ru7SpocS/1qahg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<!-- pdf-lib library -->
<!-- For merging PDF files -->
<script src="https://unpkg.com/[email protected]"></script>

<div>
  <h2>Export reports from multiple Flexmonster instances into one file</h2>
  <p>
    This example demonstrates how to use the
    <a
      href="https://www.flexmonster.com/api/exportto/#destinationtype"
      target="_blank"
    >destinationType: "plain"</a> and the
    <a
      href="https://www.flexmonster.com/api/exportto/#callbackHandler"
      target="_blank"
    >callbackHandler</a> to export reports from multiple Flexmonster instances 
    into one file. The approach is different depending on the export type:
  </p>
  <ul>
    <li>
      For Excel export — check out the lines 67-115 in the JavaScript box.
    </li>
    <li>For PDF export — check out the lines 117-162 in the JavaScript box.</li>
    <li>For CSV export — check out the lines 164-186 in the JavaScript box.</li>
    <li>
      For HTML export — check out the lines 188-210 in the JavaScript box.
    </li>
    <li>
      For image export — check out the lines 212-243 in the JavaScript box.
    </li>
  </ul>
  <p>
    To see the result, click the <strong>Export to</strong> buttons for each
    export type.
  </p>
  <p>
    <a href="https://www.flexmonster.com/doc/export-report/" target="_blank"
    >Learn more about export in Flexmonster</a>.
  </p>
</div>

<button...

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot1 = new Flexmonster({
  container: "pivotContainer1",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 350,
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/retail-data.json"
    },
    mapping: {
      "Order Date": {
        type: "year/quarter/month/day"
      }
    },
    slice: {
      rows: [{
          uniqueName: "Country"
        }
      ],
      columns: [{
          uniqueName: "Order Date"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    }
  }
});

const pivot2 = new Flexmonster({
  container: "pivotContainer2",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 350,
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/retail-data.json"
    },
    mapping: {
      "Order Date": {
        type: "year/quarter/month/day"
      }
    },
    slice: {
      rows: [{
          uniqueName: "City"
        }
      ],
      columns: [{
          uniqueName: "Retail Category"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    },
  }
});

// Excel export
const EXCEL_PART = "part";

function doubleExportExcel() {
  // Export report from the 1st Flexmonster instance
  pivot1.exportTo(
    "excel", {
      destinationType: "plain",
      excelSheetName: EXCEL_PART,
    },
    result => {
      // Read data from the 1st Excel using xlsx library
      const excel1 = XLSX.read(result.data.buffer, {
        type: "buffer"
      });
      // Export report from the 2nd Flexmonster instance
      pivot2.exportTo(
        "excel", {
          destinationType: "plain",
          excelSheetName: EXCEL_PART,
        },
        result => {
          // Read data from the 2nd Excel...