How to save SharePoint form as PDF for printing

Size

paperSize option specifies the size of the pages.

By default, the option is ‘auto’—the page automatically adjusts its size to the content. You can set this option to one of the predefined paper sizes or specify a custom size.

The following predefined paper sizes are available:

• A0-A10, B0-B10, C0-C10,

• Executive, Folio, Legal, Letter, Tabloid.

Examples:

Paper size: A4

fd.pdfOptions = {
     paperSize: 'A4'
};

Paper Size: Custom

fd.pdfOptions = {
    paperSize: ['297mm', '297mm']
};

For the invoice document, we select the standard A4 page size.

Orientation

landscape option specifies the orientation of the pages. By default, the option is ‘false’—the page orientation is portrait (vertical). To change the orientation of PDF pages to landscape (horizontal), set the parameter to true.

Examples:

Page Orientation: landscape (horizontal)

fd.pdfOptions = {
    paperSize: 'A4',
    landscape: true
};

Page Orientation: portrait (vertical)

fd.pdfOptions = {
    paperSize: 'A4',
    landscape: false
}

The optimal page orientation for the invoice is portrait (vertical).

Margins

margin is an object that defines the top, left, right, and bottom margins of a page. You can set the same size for all margins or specify the size of the margins for each side of the page separately.

Examples:

Page Margins: one size

fd.pdfOptions = {
    paperSize: 'A4',
    landscape: false,
    margin: '10mm'
};

Page Margins: custom size

fd.pdfOptions = {
    paperSize: 'A4',
    landscape: false,
    margin: {
        left   : '20mm',
        top    : '40mm',
        right  : '20mm',
        bottom : '40mm'
    }
};

Show or hide blocks of elements

For instance, you want to hide elements in the resulting PDF or vice versa. These can be buttons, fields, titles, containers, etc.

In this example, we will hide the Submit button in the resulting PDF. First, we assign the ‘pdf-hide’ CSS class to it:

Then, add the following rule to the CSS editor to hide it in PDF:

.k-pdf-export .pdf-hide {
    display: none !important;
}

You can assign the same class to each element you want to hide in the PDF and hide them all at once.

Additionally, we add the date and contact information to the PDF document, but we don’t want it to be visible in the form. To do so, we put the contact information in the Grid and assign it a CSS class ‘company-info’.

Next, we add rules to the CSS editor that make the company information visible only in the PDF document.

/*hide company information on the form*/
.company-info {
    display: none !important;
}

/*show company information in PDF document*/
.k-pdf-export .company-info {
    display: contents !important;
}

And this is the result:

Change fields appearance

Also, we want to change the appearance of the input controls in the PDF document. In particular, we want to hide field titles and input borders. We can do that with the CSS rules:

/*hide field titles*/
.k-pdf-export label.fd-field-title {
    display: none;
}

/*hide input borders*/
.k-pdf-export span.k-dropdown-wrap.k-state-default,
.k-pdf-export .fd-form input.form-control {
    border: none !important;
}

And get rid of the icons: the arrow icons in the drop-down, number fields, and the calendar icon in the Date and Time field.

.k-pdf-export span.k-select {
    display: none !important;
}

Here you can see the difference between the form and the PDF document:

Adjust Data Table and List or Library

One more thing you may want to change is the appearance of the Data Table control in the PDF document.

Use the following CSS rules to hide the last command column of the Data Table, toolbar, and colored lines.

/* hide delete column and toolbar from datatable */
.k-pdf-export .fd-datatable table tr th:last-child,
.k-pdf-export .fd-datatable table tr td:last-child,
.k-pdf-export .fd-datatable div.k-header.k-grid-toolbar {
    display: none;
}

/* remove colored lines from datatable */
.k-pdf-export .fd-datatable table tr.k-alt {
    background-color: white;
}

This is the difference between the form and the PDF file:

To do the same for List or Library control use this CSS:

/* hide delete column and toolbar from List or Library  */
.k-pdf-export .fd-sp-datatable-wrapper table tr th:nth-of-type(1),
.k-pdf-export .fd-sp-datatable-wrapper table tr td:nth-of-type(1),
.k-pdf-export .fd-sp-datatable-wrapper table tr th:nth-of-type(2),
.k-pdf-export .fd-sp-datatable-wrapper table tr td:nth-of-type(2),
.k-pdf-export .fd-sp-datatable-toolbar {
    display: none !important;
}

/* remove colored lines from List or Library  */
.k-pdf-export .fd-sp-datatable-wrapper table tr.k-alt {
    background-color: white;
}

This is how the List or Library control looks in a web form and in PDF file:

Expand Tabs and Accordion sections

If you use Tab or Accordion containers, you would probably want to display all its content at once in the resulting PDF file. This can be achieved using CSS rules.

For example, I have a three tab on the form:

Since we are going to hide tabs themselves, you can add a Plain Text control title to each tab and give it a common CSS class. The titles will only be shown on the exported PDF, so we give each title ‘tab-title’ CSS class:

Next, add the following CSS rules to the CSS editor:

/* show tab contents for all tabs */
.k-pdf-export .tabset .tab-content div.tab-pane.fade {
    display: block !important;
    opacity: 1 !important;
}

/* hide tab navigation bar */
.k-pdf-export .tabset ul.nav.nav-tabs {
    display: none !important;
}

/* hide tab titles by default */
.tab-title {
    display: none;
}

/* show tab titles when exporting */
.k-pdf-export .tab-title {
    display: block;
}

And then, after exporting to PDF, we get this:

Similar to tabs, accordion panels can be extended with appropriate CSS styles.

This is the form with Accordion container:

Add the following CSS to expand Accordion in the resulting PDF file:

/* show contents for all Accordion panels */
.k-pdf-export .accordion .card-block {
    display: block !important;
    height: auto !important;
}

/* gray out all navigation links */
.k-pdf-export .accordion>.card>.card-header>.nav-link {
    background-color: #fff;
    color: #55595c;
}

And get the following result on PDF page:

Adjust layout prior to PDF export

Some key features of PDF export are calculated before the styles of .k-pdf-export are applied - for example, page-breaks are calculated without taking these styles into account.

To adjust for this downside, it’s possible to take it into account, and apply special styles prior to PDF export.

For this, you can modify existing button’s functionality to add .pre-print class to the form on export:

//change PDF button click function
fd.toolbar.buttons[2].click = function(){
    // Get the DIV element by class name
    var divElement = document.querySelector('.fd-form-container');

    // Add the class pre-print to the DIV element
    divElement.classList.add('pre-print');

    await fd.exportToPDF('My Document', {
            landscape: false,
            paperSize : 'A4',
            forcePageBreak: '.breaker',
            multiPage: false,
            margin: '0mm'
        });
    }

    // Remove the class pre-printfrom the DIV element after export
    divElement.classList.remove('pre-print');
}

You can adjust styles and layout of .pre-print elements, and these changes are taken into export calculations:

.pre-print .subtitle {
    font-size: 8px;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.pre-print *,.pre-print ::before,.pre-print ::after {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.pre-print .fd-form {
    font-size: 45%;
}