PDF Export

The PivotGrid enables you to export its content to PDF.

Basics

You can export the data of the PivotGrid to PDF and use the client PDF-export functionality which is server-agnostic and which relies on the Kendo UI Drawing library. To enable the export to PDF, configure the PDF settings. To trigger the PDF export, invoke the saveAsPdf method.

<div id="vueapp" class="vue-app">
    <kendo-button @click="onClick" class="k-primary">Export</kendo-button>
    <kendo-pivotdatasource ref="pivotdatasource1"
                           transport-read-url="https://demos.telerik.com/olap/msmdpump.dll"
                           transport-connection-catalog="Adventure Works DW 2008R2"
                           transport-connection-cube="Adventure Works"
                           type="xmla"
                           schema-type="xmla"
                           :measures="measures">
          <kendo-pivot-column :name="'[Date].[Calendar]'" :expand="true"></kendo-pivot-column>
          <kendo-pivot-row :name="'[Product].[Product Line]'" :expand="true"></kendo-pivot-row>
    </kendo-pivotdatasource>
    <kendo-pivotgrid id="pivotgrid1"
                     ref="pivot1"
                     data-source-ref="pivotdatasource1"
                     :columnWidth="200"
                     :height="400"
                     :pdf-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"
                     :pdf-file-name="'Kendo UI PivotGrid Export.pdf'">
    </kendo-pivotgrid>
</div>
<style>
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>
Vue.use(ButtonsInstaller);
Vue.use(PivotGridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            measures: ['[Measures].[Reseller Freight Cost]']
        }
    },
    methods: {
      onClick: function (ev) {
        var pivot = this.$refs.pivot1.kendoWidget()
        pivot.saveAsPDF()
      }
    }
})

In this article