JSFiddle - React, Tailwind, and code Playground

Export and print

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<link rel="stylesheet" href="https://cdn.flexmonster.com/assets/jsfiddle-styles.css" />

<!-- xlsx library -->
<!-- For 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>

<button onclick="excel()">Export to Excel</button>
<div id="pivot-container"></div>

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
      ],
      columns: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
      reportFilters: [
        {
          uniqueName: "Business Type",
        },
      ],
    },
  },
});

function excel() {
  const params = {
    destinationType: "plain",
    filename: "flexmonster",
    header: "First header row",
    excelSheetName: "Report",
    showFilters: true,
  };
  pivot.exportTo("excel", params, exportHandler);
}

function exportHandler(result) {
  // Read data from Excel using xlsx library
  const excel1 = XLSX.read(result.data.buffer, {
    type: "buffer",
  });
  // TODO: Customize header using xlsx
  //Export to Excel
  XLSX.writeFile(excel1, "flexmonster.xls");
}