← Back to Features

Export Methods

Test all export methods. Load some data and configure a pivot first, then try the export buttons.

🎯 Live Demo

Load data and set up a pivot before exporting.

Grid Export

Chart Export

Source Data Export

Display Mode

💻 Implementation Code

export-example.html 
<!DOCTYPE html>
<html>
<head>
  <title>WebPivotTable Export Methods</title>
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</head>
<body>
  <h1>Export Methods Demo</h1>

  <!-- Grid Export -->
  <div>
    <h3>Grid Export</h3>
    <button onclick="wpt.exportGridToExcel('MyReport')">Excel</button>
    <button onclick="wpt.exportGridToPdf('MyReport')">PDF</button>
    <button onclick="wpt.exportGridToHtml('MyReport')">HTML</button>
    <button onclick="wpt.printGrid()">Print</button>
  </div>

  <!-- Chart Export -->
  <div>
    <h3>Chart Export</h3>
    <button onclick="wpt.exportChartToImage('MyChart')">PNG</button>
    <button onclick="wpt.exportChartToPdf('MyChart')">PDF</button>
    <button onclick="wpt.printChart()">Print</button>
  </div>

  <!-- Source Data Export -->
  <div>
    <h3>Source Data Export</h3>
    <button onclick="wpt.exportSourceToExcel('MyData')">Excel</button>
    <button onclick="wpt.exportSourceToCsv('MyData')">CSV</button>
    <button onclick="wpt.printSource()">Print</button>
  </div>

  <web-pivot-table id="wpt" style="width:100%;height:600px"></web-pivot-table>

  <script>
    const wpt = document.getElementById('wpt')

    // Load sample data
    wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')
  </script>
</body>
</html>

� Usage Notes