Export Embedded Views


Using the Embedding API, you can export or download the views in various formats, including PDF, PowerPoint, crosstab (CSV), Excel, image (PNG). You can also export the summary data. The Embedding API provides support for programmatically exporting the embedded view in all formats, without user interaction. You can also use the Embedding API to open the export or download dialog boxes where users can select the views to download and other options.

In this section

Export or download with user interaction (dialog boxes)

You can call the Viz.displayDialogAsync() method to open various dialog boxes for exporting or downloading the current view. The method has one parameter, the TableauDialogType, which specifies what type of dialog box to display. Use this method if you want to allow users to select additional options using the dialog box for a specific type of export or download. The options are described in the following table.

TableauDialogType Description
TableauDialogType.ExportPDF Opens the Download PDF dialog box
TableauDialogType.ExportCrossTab Opens the Download Crosstab dialog box. You can choose Excel or CSV as the format.
TableauDialogType.ExportPowerPoint Opens the Download PowerPoint dialog box. You can choose to download the view or specific sheets in the dashboard or the workbook
TableauDialogType.ExportData Opens the View Data window where you can view or download the summary or full data.
TableauDialogType.ExportWorkbook Opens the Download Tableau Workbook dialog box. You can choose the version of the Tableau workbook to download.
TableauDialogType.Share Opens the Share dialog box.

To use the Viz.displayDialogAsync() method, you first get the TableauViz object and then call the method specifying the TableauDialogType. For example, you could open the Download PDF dialog box using the following sample code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Simple Export</title>

<script type="module">
import { TableauViz, TableauEventType, TableauDialogType  } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"

const tableauViz = document.querySelector('tableau-viz');
tableauViz.addEventListener(TableauEventType.FirstInteractive, (e) => {
  document.getElementById('export-pdf').onclick = async () => { 
    await tableauViz.displayDialogAsync(TableauDialogType.ExportPDF);
   };
});
</script>
</head>
<body>
<button type="button" id="export-pdf">Export to PDF</button>
<div>
<tableau-viz id="tableauViz"       
  src='https://public.tableau.com/views/Superstore_embedded_800x800/Overview'      
  toolbar="bottom" hide-tabs>
  <viz-filter field="Category" value="Technology"> </viz-filter>    
  <viz-filter field="State" value="California,Oregon,Washington"> </viz-filter>
</tableau-viz>
</div>
</body>
</html>

Here is what the example looks like when you use it in a web page.

Export or download directly without user interaction

If you want to programmatically export or download a view, without user interaction, you can use one of the exporting methods to export from the view in crosstab (Excel or CSV), PDF, or PowerPoint formats, or as an image file (.PNG). You can also programmatically download the summary or full data that appears in the View Data window.

Export image (PNG)

You can use the exportImageAsync() method to export an image of the currently active view. To download the image, you just need access to the TablaeuViz object. The method has no parameters and downloads the image as a .PNG file. The file takes the name of the active view and is placed in the user’s default download directory.

The following example shows how you could embed a viz in a web page and enable users to download the image when they click a button on the page.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Export Image</title>

<script type="module">
import { TableauViz, TableauEventType } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"

<head>
<script>

const tableauViz = document.querySelector('tableau-viz');
tableauViz.addEventListener(TableauEventType.FirstInteractive, (e) => {

  document.getElementById('export-image').onclick = async () => { 
   await tableauViz.exportImageAsync();
   };
});
</script>
</head>
<body>
<div>
<tableau-viz id="tableauViz"       
  src='https://public.tableau.com/views/Superstore_embedded_800x800/Overview'>
</tableau-viz>

<button type="button" id="export-image">Export Image</button>
</div>
</body>

</html>

Export crosstab (CSV, Excel)

Use the Viz.exportCrosstabAsync() method to programmatically export a crosstab (pivot table) from the specified worksheet in the view, in either CSV or Excel format. The method has two parameters, the name of the selected worksheet and the file format to use.

Format Description
CrosstabFileFormat.Excel Exports crosstab from the selected worksheet in Excel format (.xlsx)
CrosstabFileFormat.CSV Exports crosstab from the selected worksheet in CSV format (.csv)

The following example shows how you could export a crosstab from a worksheet as an Excel file using the Viz.exportCrosstabAsync() method. Be sure to import CrosstabFileFormat from the Embedding API library so that you can set the file format. The example exports the crosstab in Excel format from the first worksheet in the array of worksheets in the dashboard.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Crosstab Export</title>

<script type="module">
import { TableauViz, TableauEventType, CrosstabFileFormat  } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"

    const tableauViz = document.querySelector('tableau-viz');
    tableauViz.addEventListener(TableauEventType.FirstInteractive, (e) => {
      document.getElementById('export-crosstab').onclick = async () => {
        const activeSheet = tableauViz.workbook.activeSheet;
        const worksheets = activeSheet.worksheets;
        const selectedWorksheetForExport = worksheets[1];
        const crosstabFileFormat = CrosstabFileFormat.Excel;
        tableauViz.exportCrosstabAsync(selectedWorksheetForExport.name, crosstabFileFormat).then(() => {
        console.log(`${selectedWorksheetForExport.name}: ${crosstabFileFormat}`);
        });
      };    
    });
</script>
<body>
    <div>
  <tableau-viz id="tableauViz"       
  src='https://public.tableau.com/views/Superstore_embedded_800x800/Overview'></tableau-viz>
     <button id="export-crosstab">Export Crosstab</button>
    </div>
</body>
</html>

Export PDF

Use the Viz.exportPDFAsync() method to programmatically export a PDF of the specified worksheet(s) in the view. The method has two parameters, the names of worksheets to export and the exportPDFOptions. The PDF options include page size, scaling, and orientation.

When you specify the names of the worksheet(s) to export in the PDF file, the method follows the same logic as the Download PDF dialog box. You can either choose specific sheets in the dashboard, or choose from the published sheets in the workbook. You can’t mix the two. If no worksheets are specified, the currently active sheet is exported.

Be sure to import PrintScaling, PrintPageSize, PrintOrientation from the Embedding API library so that you can set the PDF options (ExportPDFOptions). These enumerations provide the same options that are available in the Download PDF dialog box. Note that if you set the ExportPDFOptions, you need to provide values for all of the options (scaling, page size, and orientation), as the method will throw an error if one is missing. If you want to use the default values, omit the ExportPDFOptions argument when you call the method.

ExportPDFOptions Values Description
scaling PrintScaling.Automatic, PrintScaling.Perc25,
PrintScaling.Perc50, PrintScaling.Perc60,
PrintScaling.Perc75, PrintScaling.Perc80,
PrintScaling.Perc90, PrintScaling.Perc100,
PrintScaling.Perc200, PrintScaling.Perc400,
PrintScaling.AtMost1PageHigh, PrintScaling.AtMost2PagesHigh,
PrintScaling.AtMost1PageWide, PrintScaling.AtMost2PagesWide		 Shrinks or enlarges the size of the view in the PDF file. If ExportPDFOptions is not specified, PrintScaling.Automatic is the default.
pageSize PrintPageSize.A3, PrintPageSize.A4,
PrintPageSize.A5, PrintPageSize.B4,
PrintPageSize.B5, PrintPageSize.Executive,
PrintPageSize.Folio,PrintPageSize.Ledger,
PrintPageSize.Legal, PrintPageSize.Letter,
PrintPageSize.Note, PrintPageSize.Quarto,
PrintPageSize.Statement,PrintPageSize.Tabloid, PrintPageSize.Unspecified		 Sets the size of the PDF pages. If ExportPDFOptions is not specified, the default is PrintPageSize.Letter.
orientation PrintOrientation.Landscape, PrintOrientation.Portrait Sets the page orientation. If ExportPDFOptions is not specified, the default is PrintOrientation.Portrait.

The following example shows how you could use the Viz.exportPDFAsync() method. The example downloads a PDF that contains all of the published views in a workbook. The example creates an array of the names of worksheets to export, using the publishedSheetsInfo property to return the list of worksheets in the workbook.

The example also shows how you can create the exportPDFOptions object that contains the PDF options for exporting. Note that you need to provide values for all the options (scaling, page size, and orientation). Omitting an option will cause an error.


const exportPDFOptions = {
        scaling: PrintScaling.Automatic,
        pageSize: PrintPageSize.Letter,
        orientation: PrintOrientation.Portrait,
       };

And then pass those options along with the array of worksheets to export in the call to the tableauViz.exportPDFAsync() method.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>PDF Export</title>

<script type="module">
import { TableauViz, TableauEventType, PrintScaling, PrintPageSize, PrintOrientation  } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"

    const tableauViz = document.querySelector('tableau-viz');
    tableauViz.addEventListener(TableauEventType.FirstInteractive, (e) => {

        document.getElementById('export-pdf').onclick = async () => {
          const publishedSheetsInfo = tableauViz.workbook.publishedSheetsInfo;
          const selectedWorkbookSheetsForExport = Array.from(publishedSheetsInfo, (publishedSheetInfo) => publishedSheetInfo.name);
          const exportPDFOptions = {
            scaling: PrintScaling.Automatic,
            pageSize: PrintPageSize.Letter,
            orientation: PrintOrientation.Portrait,
          };
          tableauViz.exportPDFAsync(selectedWorkbookSheetsForExport, exportPDFOptions).then(() => {
            console.log(`Workbook: ${selectedWorkbookSheetsForExport.toString()}`);
            console.log('Options:', exportPDFOptions);
          });
        };
    });
</script>
<body>
    <div>
  <tableau-viz id="tableauViz"       
  src='https://public.tableau.com/views/Superstore_embedded_800x800/Overview'></tableau-viz>
     <button id="export-pdf">Export PDF</button>
    </div>
</body>
</html>

Export PowerPoint (PPT)

Use the Viz.exportPowerPointAsync() method to programmatically export the specified sheet(s) to a PowerPoint file. If no sheets are specified, the currently active sheet is exported. The method has one parameter, the names of worksheets to export. The order the worksheets appear in the list is the order they appear in the PowerPoint file.

Note that the list must either contain specific sheets from the dashboard, or contain specific sheets from the workbook. You can’t mix the two. The Viz.exportPowerPointAsync() method functions the same way the Download PowerPoint dialog box does, and the list of sheets correspond to the choices in the dialog box drop-down menu.

The following example shows one way you could use the Viz.exportPowerPointAsync() method on a web page. The example downloads a PowerPoint file of all the sheets in the dashboard. If you wanted to download a PowerPoint of all the published sheets in the workbook, you could use the workbook.publishedSheetsInfo property to create a list of sheets and pass that to the Viz.exportPowerPointAsync() method.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>PowerPoint Export</title>

<script type="module">
import { TableauViz, TableauEventType  } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"

    const tableauViz = document.querySelector('tableau-viz');
    tableauViz.addEventListener(TableauEventType.FirstInteractive, (e) => {
       console.log("The Viz is now interactive");
    })
</script>
<script>
   async function exportPPTAsync() {

        const activeSheet = tableauViz.workbook.activeSheet;
        const worksheets = activeSheet.worksheets;
        const selectedWorksheetsForExport = Array.from(worksheets, (worksheet) => worksheet.name);
        console.log('Export PowerPoint:');
        try {
          await tableauViz.exportPowerPointAsync(selectedWorksheetsForExport).then(() => {
            console.log(`Worksheets: ${selectedWorksheetsForExport.toString()}`);
          });
        } catch (e) {
            console.error(e);
          };
    }; 

</script>
</head>
<body>
    <div id="main">
  <tableau-viz id="tableauViz"  src='https://public.tableau.com/views/Superstore_embedded_800x800/Overview'></tableau-viz> 
     <button id="export-powerpoint" onclick="exportPPTAsync()">Export PowerPoint</button>
    </div>
</body>
</html>

Export data from the view

Use the Viz.exportDataAsync() method to programmatically download summary data from the specified sheet within the current view. The data is downloaded in a CSV file. The method has two parameters, the name of the worksheet and the optional ExportDataOptions. You can use the ExportDataOptions to filter the data by column ID, so that you can download only the data you are interested in.

ExportDataOptions Description
columnsToInclude Specifies the column IDs of the columns you want to include in the CSV file. The order of the array IDs determines the order of columns in the summary data table.
ignoreAliases Ignores aliases in data source. The default is FALSE.

The following example shows how you might download the summary data from a worksheet. The example uses the first worksheet from the array of worksheets in a dashboard. This example selects all the columns of summary data to include in the download.

          
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Data Export</title>

    <script type="module">
        import {
            TableauViz,
            TableauEventType,
        } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js";

        const tableauViz = document.querySelector("tableau-viz");
        tableauViz.addEventListener(TableauEventType.FirstInteractive, (e) => {
            console.log("The viz is interactive");
        });

        document.getElementById("export-data").onclick = exportData;

        async function exportData() {
            // get the currently active sheet (dashboard in this case)
            const activeSheet = tableauViz.workbook.activeSheet;
            const worksheets = activeSheet.worksheets;
            // use the first worksheet
            const selectedWorksheetForExport = worksheets[0];
            // include all columns in the summary data
            const columns =
                await selectedWorksheetForExport.getSummaryColumnsInfoAsync();
            const columnsToInclude = Array.from(
                columns,
                (column) => column.fieldId
            );
            const ignoreAliases = false;
            const exportDataOptions = { ignoreAliases, columnsToInclude };
            console.log("Export Data:");
            try {
                await tableauViz
                    .exportDataAsync(selectedWorksheetForExport.name, exportDataOptions)
                    .then(() => {
                        console.log(
                            `${selectedWorksheetForExport.name}:`,
                            exportDataOptions
                        );
                    });
            } catch {
                console.error(e);
            }
        }
    </script>
</head>

<body>
    <div id="main">
        <tableau-viz id="tableauViz" src="https://public.tableau.com/views/Superstore_embedded_800x800/Overview"></tableau-viz>
        <button id="export-data">Export Data</button>
    </div>
</body>

</html>