Excel Export

The built-in export functionality of the PivotGrid allows you to share and distribute data in Excel.

Basics

The PivotGrid enables you to export data to MS Excel and provides client Excel-export functionality which is server-agnostic and which can be directly utilized to share data offline. To trigger the export to Excel, invoke the saveAsExcel method of the PivotGrid. In order for the Excel export to work, add a reference to the jszip library on the page by either using NPM and assigning the global window.JSZip variable or by adding the script from CDN with the code.

<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"
                     :excel-file-name="'Kendo UI PivotGrid Export.xlsx'"
                     :excel-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"
                     :excel-filterable="true">
    </kendo-pivotgrid>
</div>
<style>
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>
Vue.use(ButtonsInstaller);
Vue.use(PivotGridInstaller);
Vue.use(DataSourceInstaller);

window.JSZip = JSZip;

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

In this article