Demo - Export to XLSX and PDF

by Rambabu Pudi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.pdf.min.js"></script>
<div class="container">

  <h1>
    Export to XLSX and PDF
  </h1>
  <p>
    The <b>PivotGrid</b> exends the <b>FlexGrid</b>, 
    so you can export it to XLSX and PDF as you would 
    export a regular <b>FlexGrid</b>:
  </p>
  <div class="row">
    <div class="col-xs-5">
      <div id="pivotPanel"></div>
    </div>
    <div class="col-xs-7">
      <div id="pivotGrid"></div>
    </div>
  </div>
  <p>
    Export to:
    <button id="csv" class="btn btn-primary">
      CSV
    </button>
    <button id="xlsx" class="btn btn-primary">
      XLSX
    </button>
    <button id="pdf" class="btn btn-primary">
      PDF
    </button>
    <button id="pdfdoc" class="btn btn-primary">
      PDF Document
    </button>
  </p>
</div>

CSS

.wj-pivotgrid {
  max-height: 400px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

body {
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

  // initialize pivot engine
  var ng = new wijmo.olap.PivotEngine({
    itemsSource: getData(1000), // raw data
    valueFields: ['Amount'], // summarize amounts
    rowFields: ['Buyer', 'Type'], // by buyer and Type
    showRowTotals: 'Subtotals',
    showColumnTotals: 'Subtotals',
  });
  var amountField = ng.fields.getField('Amount');
  amountField.format = 'c0';
  var dateField = ng.fields.getField('Date');
  dateField.format = 'yyyy'; // show dates as years

  // show pivot panel
  var pivotPanel = new wijmo.olap.PivotPanel('#pivotPanel', {
    itemsSource: ng
  });

  // show pivot grid
  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    itemsSource: ng
  });

  // export the grid to CSV (no additional modules required)
  document.getElementById('csv').addEventListener('click', function() {
    var rng = new wijmo.grid.CellRange(0, 0,
                  pivotGrid.rows.length - 1, pivotGrid.columns.length - 1),
        csv = pivotGrid.getClipString(rng, true, true, true);
    exportFile(csv, 'PivotGrid.csv');
  });

// export the grid to XLSX
  // NOTE: requires jszip, wijmo.xlsx, and wijmo.grid.xlsx
  document.getElementById('xlsx').addEventListener('click', function() {

    // create book with current view
    var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(pivotGrid, {
      includeColumnHeaders: true,
      includeRowHeaders: true
    });
    book.sheets[0].name = 'PivotGrid';

    // save the book
    book.save('PivotGrid.xlsx');
  })

  // export grid to PDF
  // NOTE: requires wijmo.pdf and wijmo.grid.pdf
  document.getElementById('pdf').addEventListener('click', function() {
    wijmo.grid.pdf.FlexGridPdfConverter.export(pivotGrid, 'PivotGrid.pdf', {
      maxPages: 10,
      scaleMode: wijmo.grid.pdf.ScaleMode.PageWidth,
      documentOptions: {
        compress: true,
        header: {
          declarative: {
            text: '\t&[Page] of &[Pages]'
          }
        },
        footer: {
         ...