PDF Export Basics

The GridPDFExport component provides options for exporting the content of the native Vue Grid by Kendo UI to PDF.

Getting Started

To enable the PDF export, wrap the Grid with the GridPDFExport component. To initiate the PDF export, use the save method. For the complete example, refer to the demo on Stackblitz.

<div id="vueapp" class="vue-app">
    <button @click="exportPDFWithComp" class="k-button">Export pdf via a component</button>
    <grid-pdf-export ref="gridPdfExport">
        <Grid
            :style="{height: '280px'}"
            :data-items="items"
            :skip= "skip"
            :take="take"
            :total="total"
            :pageable="pageable"
            :page-size="pageSize"
            @pagechange="pageChangeHandler"
            :columns = "columns">
        </Grid>
    </grid-pdf-export>
</div>
import { GridPdfExport } from '@progress/kendo-vue-pdf';
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('Grid', Grid);
Vue.component('grid-pdf-export', GridPdfExport);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            skip: 0,
            take: 10,
            products: [],
            pageSize: 10,
            pageable: {
                buttonCount: 5,
                info: true,
                type: 'numeric',
                pageSizes: true,
                previousNext: true
            },
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ]
        };
    },
    computed: {
        items: {
            get: function() {
                return this.products.slice(this.skip, this.take + this.skip);
            }
        },
        total () {
            return this.products ? this.products.length : 0;
        }
    },
    methods: {
        exportPDFWithComp: function() {
            (this.$refs.gridPdfExport).save();
        },
        pageChangeHandler: function(event) {
            this.skip = event.page.skip;
            this.take = event.page.take;
        },
        createRandomData(count) {
            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]

            return Array(count).fill({}).map((_, idx) => ({
                ProductID: idx + 1,
                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
            }));
        }
    },
    mounted() {
        this.products = this.createRandomData(1000);
    }
});

PDF Export Options

In this article