Export table and chart into the same document using toolbar in vue Pivotview component

11 Jun 20246 minutes to read

Even if the displayOption.view property is set to Both in the pivot table, you can only export either the table or the chart to the PDF document based on the current value set in the displayOption.primary property. But, to export both the table and the chart to the same PDF document, use the pdfExport method during the actionBegin event invoke.

In the following example, the built-in export action can be restricted by setting the args.cancel option to true in the actionBegin event, and both the table and the chart can be exported by calling the pdfExport method and setting the exportBothTableAndChart argument 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/material.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/material.css";
</style>