← Back to Features

WPT File Operations

Test save/open WPT files and configure default options.

🎯 Live Demo

Ready

File Operations

Demo Pivot Table

💻 Implementation Code

wpt-file-example.html 
<!DOCTYPE html>
<html>
<head>
  <title>WPT File Operations</title>
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</head>
<body>
  <h1>WPT File Operations Demo</h1>

  <!-- File Controls -->
  <div>
    <h3>File Operations</h3>
    <button onclick="wpt.saveWpt()">Save WPT</button>
    <button onclick="wpt.openWpt()">Open WPT</button>
    <input type="file" id="fileInput" accept=".wpt" />
  </div>

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

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

    // Save current configuration as WPT file
    function saveWptFile() {
      wpt.saveWpt('my-pivot-config.wpt')
    }

    // Open WPT file dialog
    function openWptFile() {
      wpt.openWpt()
    }

    // Load from file input
    document.getElementById('fileInput').addEventListener('change', async (e) => {
      const file = e.target.files[0]
      if (file) {
        try {
          await wpt.loadWptFromFile(file)
          console.log('WPT file loaded successfully!')
        } catch (error) {
          console.error('Error loading WPT file:', error.message)
        }
      }
    })

    // Set default options
    wpt.setOptions({
      locale: 'en',
      uiFlags: {
        export: true,
        save: true
      }
    })

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

📋 Usage Notes