JSFiddle - React, Tailwind, and code Playground

Export and print

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="swapToHtml()">Swap the pivot to print version</button>
<button onclick="swapToPivot()">Swap the pivot to interactive version</button>
<div id="pivot-wrapper"></div>
<div id="pivot-container"></div>

CSS

button {
    border: 2px solid #df3800;
    background: #fff;
    color: #df3800;
    text-transform: uppercase;
    cursor: pointer;
    margin: 5px 0;
    display: inline-block;
    -webkit-transition: all .3s;
    transition: all .3s;
    font-weight: normal;
    padding: 10px 10px;
    font-size: 14px;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "Size",
        },
      ],
      columns: [
        {
          uniqueName: "Category",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
        {
          uniqueName: "Discount",
          aggregation: "sum",
        },
      ],
      expands: {
        rows: [
          {
            tuple: ["business type.[value added reseller]"],
          },
          {
            tuple: ["business type.[specialty bike shop]"],
          },
        ],
      },
    },
  },
});

let pivotInteractive;
let report;
function swapToHtml() {
  // loader: show here (if you want to add a separate loader)
  pivot.on("aftergriddraw", function () {
    pivot.off("aftergriddraw");
    console.log("Expanding completed, started printing!");
    pivot.exportTo(
      "html",
      {
        destinationType: "plain",
      },
      function (res) {
        // use this html to show the whole flexmonster grid while printing
        console.log("Printing completed, printed html:", res.data);
        document.getElementById("pivot-container").remove();
        document.getElementById("pivot-wrapper").innerHTML = res.data;
        // loader: hide here
      },
    );
  });
  report = pivot.getReport();//to return previous state after print
  pivotInteractive = document.getElementById("pivot-container");
  pivot.expandAllData();
}

function swapToPivot() {
  document.getElementById("pivot-wrapper").innerHTML = "";
 ...