Back to all docs
API Reference / ui / Grid / pdf
New to Kendo UI for jQuery? Start a free 30-day trial

Pdf

configuration

Configures the Kendo UI Grid PDF export settings.

pdf

Object
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  toolbar: ["pdf"],
  pdf: {
    fileName: "Products.pdf",
    title: "Product List",
    author: "Company Name",
    allPages: true
  }
});
</script>

pdf.allPages

Boolean

Exports all grid pages, starting from the first one.

Note: Chrome is known to crash when generating very large PDF-s. A solution to this is to include the Pako library. Simply loading this library with a <script> tag will enable compression in PDF, e.g.:

<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

The allPages export is not supported when virtual scrolling is enabled.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["pdf"],
  columns: [
    { field: "name" }
  ],
  dataSource: {
    data: [{ name: "Jane Doe"},
           { name: "John Doe"},
           { name: "Tim Doe"},
           { name: "Alice Doe"}],
    pageSize: 2
  },
  pdf: {
    allPages: true
  }
});
var grid = $("#grid").data("kendoGrid");
grid.saveAsPDF();
</script>

pdf.author

String

The author of the PDF document.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        author: "John Doe"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.autoPrint

Boolean

Specifies if the Print dialog should be opened immediately after loading the document.

Note: Some PDF Readers/Viewers will not allow opening the Print Preview by default, it might be necessary to configure the corresponding add-on or application.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  toolbar: ["pdf"],
  pdf: {
    autoPrint: true,
    fileName: "Products.pdf"
  }
});
</script>

pdf.avoidLinks

Boolean|String

A flag indicating whether to produce actual hyperlinks in the exported PDF file.

It's also possible to pass a CSS selector as argument. All matching links will be ignored.

Available in versions 2015.3.1020 and later

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        creator: "John Doe",
        avoidLinks: true
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    columns: [
      { field: "ProductName",
        template: ({ ProductID, ProductName }) => `<a href='products/${ProductID}/'>${ProductName}</a>` }
    ],
    pageable: true
});
</script>

pdf.creator

String

The creator of the PDF document.

Default: "Kendo UI PDF Generator"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        creator: "John Doe"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.date

Date

The date when the PDF document is created. Defaults to new Date().

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        date: new Date("2014/10/10")
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.fileName

String

Specifies the file name of the exported PDF file.

Default: "Export.pdf"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        fileName: "Products.pdf"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.forcePageBreak

String

Forces the page to break before each element that matches the applied CSS selector.

Note: Setting the paperSize to auto will override this configuration.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["pdf"],
  columns: [
    { field: "name" }
  ],
  dataSource: {
    data: [{ name: "Jane Doe"},
           { name: "John Doe"},
           { name: "Tim Doe"},
           { name: "Alice Doe"}],
    pageSize: 2
  },
  pdf: {
    allPages: true,
    paperSize: "A4",
    repeatHeaders: true,
    forcePageBreak: ".k-master-row:nth-child(2n)",
  }
});
var grid = $("#grid").data("kendoGrid");
grid.saveAsPDF();
</script>

pdf.forceProxy

Boolean

If set to true, the content will be forwarded to proxyURL even if the browser supports saving files locally.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  toolbar: ["pdf"],
  pdf: {
    forceProxy: true,
    proxyURL: "/proxy/pdf",
    fileName: "Products.pdf"
  }
});
</script>

pdf.jpegQuality

Number

Specifies the quality of the images within the exported file, from 0 to 1.

Default: 0.92

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  toolbar: ["pdf"],
  pdf: {
    jpegQuality: 0.5,
    fileName: "Products.pdf"
  }
});
</script>

pdf.keepPNG

Boolean

If set to true all PNG images contained in the exported file will be kept in PNG format.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  toolbar: ["pdf"],
  pdf: {
    keepPNG: true,
    fileName: "Products.pdf"
  }
});
</script>

pdf.keywords

String

Specifies the keywords of the exported PDF file.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        keywords: "northwind products"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.landscape

Boolean

Set to true to reverse the paper dimensions if needed such that width is the larger edge.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        landscape: true
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.margin

Object

Specifies the margins of the page (numbers or strings with units). Supported units are "mm", "cm", "in" and "pt" (default).

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        margin: {
            left: 10,
            right: "10pt",
            top: "10mm",
            bottom: "1in"
        }
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.paperSize

String|Array

Specifies the paper size of the PDF document. The default "auto" means paper size is determined by content.

The size of the content in pixels will match the size of the output in points (1 pixel = 1/72 inch).

Supported values:

  • A predefined size: "A4", "A3" etc
  • An array of two numbers specifying the width and height in points (1pt = 1/72in)
  • An array of two strings specifying the width and height in units. Supported units are "mm", "cm", "in" and "pt".

Default: "auto"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        paperSize: ["20mm", "20mm"]
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

As of Q2 2016, when paperSize is specified the Grid will use drawDOM's automatic page breaking algorithm. This makes available a few new options: template, repeatHeaders and scale.

pdf.proxyTarget

String

A name or keyword indicating where to display the document returned from the proxy.

If you want to display the document in a new window or iframe, the proxy should set the "Content-Disposition" header to inline; filename="<fileName.pdf>".

Default: "_self"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        forceProxy: true,
        proxyURL: "/save",
        proxyTarget: "_blank"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.proxyURL

String

The URL of the server side proxy which will stream the file to the end user.

A proxy will be used when the browser is not capable of saving files locally, for example, Internet Explorer 9 and Safari.

The developer is responsible for implementing the server-side proxy.

The proxy will receive a POST request with the following parameters in the request body:

  • contentType: The MIME type of the file
  • base64: The base-64 encoded file content
  • fileName: The file name, as requested by the caller.

The proxy should return the decoded file with the "Content-Disposition" header set to attachment; filename="<fileName.pdf>".

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        proxyURL: "/save"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.repeatHeaders

Boolean

Set this to true to repeat the grid headers on each page.

Important

Using a repeatHeaders requires setting paper size

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  toolbar: ["pdf"],
  pdf: {
    paperSize: "A4",
    repeatHeaders: true,
    fileName: "Products.pdf"
  }
});
</script>

pdf.scale

Number

A scale factor. In many cases, text size on screen will be too big for print, so you can use this option to scale down the output in PDF. See the Scaling the Drawings article.

Default: 1

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  toolbar: ["pdf"],
  pdf: {
    paperSize: "A4",
    scale: 0.8,
    fileName: "Products.pdf"
  }
});
</script>

Important

Using scale requires setting paper size

pdf.subject

String

Sets the subject of the PDF file.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        subject: "Products"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

pdf.template

String

A piece of HTML to be included in each page. Can be used to display headers and footers. See the documentation in drawDOM.

Available template variables include:

  • pageNum
  • totalPages

Important

Using a template requires setting paper size

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  toolbar: ["pdf"],
  pdf: {
    paperSize: "A4",
    template: ({ pageNum, totalPages }) => `<div class="page-template">
      <h2>Product Catalog - Page ${kendo.htmlEncode(pageNum)} of ${kendo.htmlEncode(totalPages)}</h2>
      </div>`,
    fileName: "Products.pdf"
  }
});
</script>

pdf.title

String

Sets the title of the PDF file.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        title: "Products"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

Related Members

  • pdf.margin - Specifies the margins of the page (numbers or strings with units). Supported units are "mm", "cm", "in" and "pt" (default).
In this article
pdfpdf.allPagespdf.authorpdf.autoPrintpdf.avoidLinkspdf.creatorpdf.datepdf.fileNamepdf.forcePageBreakpdf.forceProxypdf.jpegQualitypdf.keepPNGpdf.keywordspdf.landscapepdf.marginpdf.paperSizepdf.proxyTargetpdf.proxyURLpdf.repeatHeaderspdf.scalepdf.subjectpdf.templatepdf.title
Not finding the help you need?
Contact Support