JSFiddle - React, Tailwind, and code Playground

Data source

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/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
  integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<h3>Try exporting to PDF using the "Export" tab</h3>
<div id="pivot-container"></div>

<div id="dialogBox">
  <button onclick="exportToPdf()">Export</button>
  <button onclick="previewNewTab()">Preview in new tab</button>
  <button onclick="closeExport()">&times;</button>
  <h2>Export preview</h2>
  <div id="exportPreview"></div>
</div>

CSS

#dialogBox {
  background: white;
  padding: 20px;
  border-radius: 8px;
  position: absolute;
  z-index: 1000;
  width: 80%;
  top: 100px;
  margin-left: 10%;
  display: none;
}

#closeDialogBtn {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-size: 20px;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  report: {
    dataSource: {
      data: getData(),
    },
  },
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    let exportTab = tabs.find((tab) => tab.id == "fm-tab-export");
    if (!exportTab) return tabs;
    let exportToPdfTab = exportTab.menu.find(
      (tab) => tab.id == "fm-tab-export-pdf",
    );
    exportToPdfTab.handler = () => {
      exportWithPreview();
    };
    return tabs;
  };
}

let exportOptions = {
  margin: 10,
  filename: "report.pdf",
  image: {
    type: "jpeg",
    quality: 0.98,
  },
  html2canvas: {
    scale: 2,
  },
  jsPDF: {
    unit: "mm",
    format: "a4",
    orientation: "portrait",
  },
};

let exportedHTML = "";

function exportWithPreview() {
  //Export to HTML string
  pivot.exportTo(
    "html",
    {
      destinationType: "plain",
    },
    function (result) {
      let dialogBox = document.getElementById("dialogBox");
      dialogBox.style.display = "block";

      //Add preview
      let exportPreview = document.getElementById("exportPreview");
      exportPreview.innerHTML = result.data;
      exportedHTML = result.data;
    },
  );
}

function previewNewTab() {
  html2pdf()
    .from(exportedHTML)
    .set(exportOptions)
    .toPdf()
    .get("pdf")
    .then(function (pdf) {
      window.open(pdf.output("bloburl"), "_blank");
    });
}

function exportToPdf() {
  html2pdf().from(exportedHTML).set(exportOptions).save();
}

function closeExport() {
  document.getElementById("dialogBox").style.display = "none";
}

function getData() {
  return [
    {
      Color: "green",
      Country: "Canada",
      State: "Ontario",
      City: "Toronto",
      Price: 174,
      Quantity: 22,
    },
 ...