JSFiddle - React, Tailwind, and code Playground

Export and print

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<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>

CSS

.container {
  padding: 0.01em 16px;
}

.dark-grey {
  color: #fff !important;
  background-color: #616161 !important;
}

.green {
  color: #fff !important;
  background-color: #4CAF50 !important;
}

.center {
  display: inline-block;
  width: auto;
  text-align: center;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [
      	{
          uniqueName: "Quantity"
        }
      ],
      columns: [
      	{
          uniqueName: "Business Type"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
      	{
          uniqueName: "Price",
          aggregation: "percentofrow",
          format: "percent"
      	}
      ]
    },
    options: {
    	grid: {
      	showGrandTotals: "rows",
        showAutoCalculationBar: false
      }
    },
    formats: [
    	{
      	name: "percent",
        decimalPlaces: 2,
      	currencySymbol: "%",
      	positiveCurrencyFormat: "1$",
      	negativeCurrencyFormat: "-1$"
    	}
    ],
  },
  customizeCell: customizeCellFunction,
});


function excel() {
  pivot.exportTo(
    "excel", {
      destinationType: "plain",
      useCustomizeCellForData: false,
    },
    result => {
      const excel1 = XLSX.read(result.data.buffer, {
        type: "buffer"
      });
       XLSX.writeFile(excel1, "pivot.xls");
    }
  );
}

function customizeCellFunction(cell, data) {
  if (data && data.hierarchy && data.hierarchy.uniqueName == "Price" && data.type == "value") {
    if (!data.isTotal) {
      cell.text = `<div class="container">
      	<div class="dark-grey">
      		<div class="container green center" style="width:${(data.value && data.value > 100)?'100%':cell.text}">${cell.text}</div>
      	</div>
      </div>`
    }
  }
}