Syncfusion AI Assistant

How can I help you?

Export table and chart into the same document using toolbar in Vue

By default, when the displayOption.view property is set to Both in the Pivot Table, the export functionality exports either the table or the chart to the PDF document based on the current value of the displayOption.primary property. However, to export both the table and the chart into the same PDF document simultaneously, use the pdfExport method during the actionBegin event.

This approach is particularly useful when users need comprehensive reports that include both tabular data and visual representations in a single document.

Implementation steps

Follow these steps to enable combined table and chart export:

  1. Configure the Pivot Table with both table and chart display options.
  2. Handle the actionBegin event to intercept the default export action.
  3. Call the pdfExport method with the exportBothTableAndChart parameter set to true.

Code example

The following example demonstrates how to restrict the built-in export action by setting the args.cancel option to true in the actionBegin event, and then export both the table and the chart by calling the pdfExport method with the exportBothTableAndChart argument set to true.

<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :showToolbar="showToolbar"
      :allowPdfExport="allowPdfExport" :displayOption="displayOption" :showFieldList="showFieldList" :toolbar="toolbar"
      :actionBegin="actionBegin" :enableVirtualization="enableVirtualization"> </ejs-pivotview>
  </div>
</template >
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, Toolbar, FieldList, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

const dataSourceSettings = {
  dataSource: pivotData,
  expandAll: false,
  rows: [{ name: 'Country' }, { name: 'Products' }],
  columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
  values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Sold', caption: 'Units Sold' }],
  formatSettings: [{ name: 'Amount', format: 'C0' }],
};
const height = 350;
const displayOption = { view: 'Both' };
const toolbar = ['Grid', 'Chart', 'Export', 'FieldList'];
const showFieldList = true;
const showToolbar = true;
const allowPdfExport = true;
const enableVirtualization = true;

const actionBegin = (args) => {
  let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
  if (args.actionName == 'PDF export') {
    args.cancel = true;
    pivotGridObj.pdfExport({}, false, null, false, true);
  }
};

provide('pivotview', [Toolbar, FieldList, PDFExport]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>
<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :showToolbar="showToolbar"
      :allowPdfExport="allowPdfExport" :displayOption="displayOption" :showFieldList="showFieldList" :toolbar="toolbar"
      :actionBegin="actionBegin" :enableVirtualization="enableVirtualization"> </ejs-pivotview>
  </div>
</template >
<script>
import { PivotViewComponent, Toolbar, FieldList, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

export default {
  name: "App",
  components: {
    "ejs-pivotview": PivotViewComponent
  },
  data() {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        rows: [{ name: 'Country' }, { name: 'Products' }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Sold', caption: 'Units Sold' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
      },
      height: 350,
      displayOption: { view: 'Both' },
      toolbar: ['Grid', 'Chart', 'Export', 'FieldList'],
      showFieldList: true,
      showToolbar: true,
      allowPdfExport: true,
      enableVirtualization: true
    }
  },
  methods: {
    actionBegin: function (args) {
      let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
      if (args.actionName == 'PDF export') {
        args.cancel = true;
        pivotGridObj.pdfExport({}, false, null, false, true);
      }
    }
  },
  provide: {
    pivotview: [Toolbar, FieldList, PDFExport]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>