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.

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

Vue.component('Grid', Grid);
Vue.component('pdfexport', 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