Modify the exported PDF file

Export and print

by Flexmonster Pivot Table

HTML

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

<div>
  <p>
    To modify the exported PDF file, set the
    <a
      href="https://www.flexmonster.com/doc/export-report/#destinationtype-pdf"
      target="_blank"
    >destinationType</a> parameter of
    <a href="https://www.flexmonster.com/api/exportto" target="_blank"
    >exportTo()</a> to <code>"plain"</code>, and then edit the resulting file's 
    conetnts in the
    <a
      href="https://www.flexmonster.com/api/exportto/#callbackHandler"
      target="_blank"
    >callbackHandler</a>.
  </p>
  <p>
    In this example, we add a new page with a date of export to the exported
    PDF, and then save the file locally (lines 41–51 in the JavaScript box).
  </p>
</div>

<button onclick="exportAndModify()">
  Export to PDF and modify generated file
</button>

<div id="pivot-container"></div>

CSS

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

JavaScript

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

function exportAndModify() {
  pivot.exportTo("pdf", {
    destinationType: "plain",
  }, result => {
    const pdf = result.data;
    pdf.addPage();
    pdf.setFontSize(18);
    pdf.text("Export date: " + new Date(Date.now()).toLocaleDateString(), 10, 10);
    pdf.save(result.filename);
  });
}