Export options using TableauAuthoringViz

[pradeeshattlee]

Hi,
Please provide a sample demonstrating how to export reports to various formats such as PDF, CSV, Excel, Image, and others.

[pradeeshattlee]

@anyoung-tableau Please ignore issue #25 sorted out the issue use this if needed and close the issue.
Added multiple export options:

• PDF
• PowerPoint
• Image
• Data
• Crosstab

`import { Api, TableauViz, useTableauVizRef } from '@tableau/embedding-api-react';
import { useState, useEffect } from 'react';

// Configuration object - Replace with your actual values
const TABLEAU_CONFIG = {
// Your Tableau server URL
serverUrl: 'https://your-tableau-server.com',
// View path on your Tableau server
viewPath: '/site/yoursite/views/yourworkbook/yourview',

};

export default function AuthoringVizExports() {
const vizRef = useTableauVizRef();
const [jwt, setJwt] = useState('');

// Use your preferred method for asynchronously retrieving the JWT from your backend
// e.g. react-query, RTK Query, SWR, etc.
// For simplicity, the sample uses a useEffect.
useEffect(() => {
getJWT().then((jwt) => setJwt(jwt));
}, []);

const getJWT = () => {
// Call your backend API to get the JWT.
// Simulate it here with a promise for the sample.
const apiCallPromise = new Promise((resolve) => {
setTimeout(() => {
// https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_auth.html#pass-the-jwt-to-the-tableau-web-component
const jwt = 'put_your_jwt_here';
resolve(jwt);
}, 2000);
});

return apiCallPromise;

};

/**

• Handles PDF export functionality
• Opens the PDF export dialog with customizable options
  */
  const exportPDF = async () => {
  const viz = vizRef.current;
  if (!viz) {
  throw new Error('TableauViz ref not assigned yet.');
  }
  try {
  await viz.displayDialogAsync(Api.TableauDialogType.ExportPDF);
  console.log('Export PDF dialog triggered successfully');
  } catch (error) {
  console.error('Error triggering Export PDF dialog:', error);
  }
  };

/**

• Handles PowerPoint export functionality
• Exports the visualization as a PowerPoint presentation
  */
  const exportPowerPoint = async () => {
  const viz = vizRef.current;
  if (!viz) {
  throw new Error('TableauViz ref not assigned yet.');
  }
  try {
  await viz.displayDialogAsync(Api.TableauDialogType.ExportPowerPoint);
  console.log('Export PowerPoint dialog triggered successfully');
  } catch (error) {
  console.error('Error triggering PowerPoint export:', error);
  }
  };

/**

• Handles Data export functionality
• Exports the underlying data of the visualization
  */
  const exportData = async () => {
  const viz = vizRef.current;
  if (!viz) {
  throw new Error('TableauViz ref not assigned yet.');
  }
  try {
  await viz.displayDialogAsync(Api.TableauDialogType.ExportData);
  console.log('Export Data dialog triggered successfully');
  } catch (error) {
  console.error('Error triggering Data export:', error);
  }
  };

/**

• Handles Crosstab export functionality
• Exports the data in a crosstab format
  */
  const exportCrosstab = async () => {
  const viz = vizRef.current;
  if (!viz) {
  throw new Error('TableauViz ref not assigned yet.');
  }
  try {
  await viz.displayDialogAsync(Api.TableauDialogType.ExportCrossTab);
  console.log('Export Crosstab dialog triggered successfully');
  } catch (error) {
  console.error('Error triggering Crosstab export:', error);
  }
  };

return !jwt ? (

Retrieving JWT...

) : (

Export as PDF
Export as PowerPoint
Export Data
Export Crosstab

<TableauViz
ref={vizRef}
src={${TABLEAU_CONFIG.serverUrl}${TABLEAU_CONFIG.viewPath}}
token={jwt}
toolbar="bottom"
hideTabs
// Optional: Remove disableVersionCheck in production
disableVersionCheck
/>

);
}`