# Multi-Page Content

The Drawing library enables you to generate multi-page content in PDF, prevent unwanted page-splits within specific elements, and render page templates.

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#rendering-multi-page-content">
      <ComponentTitle>Rendering Multi-Page Content</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Enable multi-page output by setting multiPage to true on the master group.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#manual-page-breaking">
      <ComponentTitle>Manual Page Breaking</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Manually specify page breaks using the forcePageBreak CSS selector option.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#automatic-page-breaking">
      <ComponentTitle>Automatic Page Breaking</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Enable automatic page break insertion by setting the paperSize and margin options.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#repeated-table-headers">
      <ComponentTitle>Repeated Table Headers</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Repeat the thead row of a table at the top of every page it spans.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#page-templates">
      <ComponentTitle>Page Templates</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Add custom templates to each page with the current page number and total page count.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#preventing-page-breaking-in-elements">
      <ComponentTitle>Preventing Page Breaking in Elements</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Keep specific elements intact using the keepTogether option with CSS selectors.</ComponentDescription>
    </Component>
  </Column>
</Row>

For more information on how to render multi-page content with the PDF Processing component, refer to its [documentation](https://www.telerik.com/kendo-vue-ui-develop/components/pdf-processing/multipage-content).

## Rendering Multi-Page Content

To render a multi-page PDF file, set `multiPage: true` on the `Group` object that you pass to `exportPDF` (the master group). As a result, the master group contains only `Group` shapes—one shape per page (page groups). Each page group inherits the PDF options that you pass to the master group, unless it overrides them individually.

A page group can override the following options from the master group:

* [`paperSize`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/pdfoptions#papersize)—Sets a different paper format or size for that page.
* [`margin`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/pdfoptions#margin)—Sets different page margins for that page.
* [`landscape`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/pdfoptions#landscape)—Rotates that page independently of the others.

> If the `paperSize` option of the master group is set to `"auto"` and a page group does not override it, the paper size of that page is calculated from the content of that page group alone. This means that the pages of the final document might end up with different sizes.

## Manual Page Breaking

To manually specify the page breaks, use the `drawDOM` method which allows you to create multi-page PDF content. As a result, a page break, which matches the `forcePageBreak` CSS selector, occurs before each element.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/drawing-dom-elements/multi-page-content/manual-page-breaking/source.txt)

## Automatic Page Breaking

The `drawDOM` method supports automatic page breaking. To enable it, set the [`paperSize`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/pdfoptions#papersize) and [`margin`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/pdfoptions#margin) options—content that overflows a page automatically continues on the next one. You can still combine this with [`forcePageBreak`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/drawoptions#forcepagebreak) to manually force additional break points.

For more information, refer to the [known limitations of the Drawing library and the PDF Export component](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/limitations-browser-support).

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/drawing-dom-elements/multi-page-content/automatic-page-breaking/source.txt)

## Repeated Table Headers

When you export a long table to a multi-page PDF with [`drawDOM`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/drawdom), the `<thead>` row appears only on the first page by default, which makes the following pages hard to read. To render the table header at the top of every page the table spans, set the `repeatHeaders` option to `true` in the [`DrawOptions`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/drawoptions).

This option takes effect only for multi-page output—that is, when a `paperSize` or a `forcePageBreak` selector triggers page breaking.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/drawing-dom-elements/repeated-table-headers/source.txt)

## Page Templates

When you request multi-page output through the [`forcePageBreak`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/drawoptions#forcepagebreak) or [`paperSize`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/pdfoptions#papersize) options, you can additionally specify a page template. The page template is inserted into each page before the output is produced and you can position it relative to the page by using CSS. The template must be a function that receives the number of the current page (`pageNum`) and the total number of pages (`totalPages`).

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/drawing-dom-elements/multi-page-content/page-templates/source.txt)

## Preventing Page Breaking in Elements

To prevent specific elements from being split across pages, use the [`keepTogether`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/drawoptions#keeptogether) option, which accepts a CSS selector that you can pass to [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).

In the following example, all elements with the `"prevent-split"` CSS class stay within the boundaries of a single page and their content is never split. If such an element falls on a page margin, it moves to the next page in full.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/drawing-dom-elements/multi-page-content/preventing-page-breaking-in-elements/source.txt)

## Suggested Links

* [API Reference of the Drawing Library](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api)
* [DrawOptions](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/drawoptions)