Exporting PDFs with Different Options

Environment

Product

Progress® Kendo UI Drawing

Description

How can I export pages with different options, including landscape and portrait orientation, by using the Kendo UI Drawing library?

Solution

1. Set up the export functionality in HTML. The example below includes a button and two <div> elements, each representing a page to be exported to a PDF. When the Export to PDF button is clicked, it triggers the custom exportPages() function that passes the references to the pages as arguments.

   html

   <button kendoButton themeColor="primary" (click)="exportPages([page1, page2])">
       Export to PDF
   </button>
   
   <div #page1>
       <p>Landscape Page</p>
   </div>
   <div #page2>
       <p>Portrait Page</p>
   </div>

2. Create a new drawing group that serves as a container for the pages that will be exported. To achieve this, use the Group class from the Kendo UI Drawing library.

   ts

   public group: Group = new Group();

3. Use the custom exportPages() function to export the pages to a PDF file. This function allows you to customize the exported pages through various options like paperSize, margins, and other DrawOptions.

   ts

   public exportPages(element: HTMLElement[]): void {
       drawDOM(element[0], {
           paperSize: 'A4',
           landscape: true,
       }).then((group: Group) => {
       this.group.append(group);
   
       drawDOM(element[1], {
           paperSize: 'A4',
       }).then((group: Group) => {
           this.group.append(group);
   
           this.group.options.set('pdf', {
           multiPage: 'true',
         });
           return exportPDF(this.group, {});
       })
       .then((dataUri) => {
           saveAs(dataUri, 'export.pdf');
       });
   });
   }

The drawDOM method is used to export an HTMLElement to a drawing group with specified options, such as paper size and orientation, while the saveAs method is utilized to save the exported data (PDF in this case).

The following example demonstrates the export of PDF pages in both landscape and portrait orientations.

Change Theme

Theme

Loading ...