How to save SharePoint form as PDF for printing

Plumsail Forms has built-in functionality allowing to export any SharePoint form to PDF by clicking the button on the right side of the toolbar.

Export button

Or you can call the fd.exportToPDF when the form is submitted:

//export PDF on form submission
fd.spBeforeSave(function(){
    return fd.exportToPDF('FileName');
})

From this article, you will learn how to customize the appearance of the resulting PDF file and how to solve common problems.

Form

Assume that you have a SharePoint form that you need to export into PDF. In this example, we have a simple Invoice form with the following fields and controls:

  • Company Name (text field);

  • Address (text field);

  • ZIP code (text field);

  • Country (choice field);

  • Email (text field);

  • Purchased Products (List or Library control).

This is our form:

Form

Next, we will consider various approaches to redesigning the final PDF document.

Page layout

With JavaScript, you can specify the basic layout properties of PDF pages, such as page size, margins, etc. Let’s have a closer look at each property.

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'
};
A4

Paper Size: Custom

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

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
};
landscape (horizontal)

Page Orientation: portrait (vertical)

fd.pdfOptions = {
    paperSize: 'A4',
    landscape: false
}
portrait (vertical)

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'
};
one size margins

Page Margins: custom size

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

Page breaks

By default, the page breaks are placed automatically depending on the page dimensions: page size, margins, and orientation. But you can define where you want the page to break manually using the forcePageBreak option that holds the CSS class of the element before which the page break occurs.

For instance, you want the page to break before the Data Table control. For this, you need to add a CSS class to the parent grid and specify this class in the forcePageBreak option.

CSS class
fd.pdfOptions = {
    paperSize: 'A4',
    margin: '5 mm',
    forcePageBreak: '.page-break'
};
page break

Content adjustments

You can change the appearance of the resulting PDF using the ‘k-pdf-export’ class. CSS rules for this class apply only to the PDF document..

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:

CSS class

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’.

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:

Company info and button

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:

Change view of fields

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:

Adjust Data table

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:

Adjust List or Library

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:

Tabs

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:

CSS tabs containers

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:

Tabs PDF

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

This is the form with Accordion container:

Accordion

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:

Accordion PDF

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%;
}

Non-Latin and special characters

Suppose you have a form in French, German, or Arabic. If you apply font styling to the text, you may notice that the exported PDF stops displaying Unicode characters.

For example, if you make the following text italic:

Italic text

You get the following in the resulting PDF document:

Resulting PDF

The DejaVu Sans font contains all Unicode characters. To avoid this problem, you need to declare DejaVu Sans font using the CSS font-face:

/*apply DejaVu Sans font to the content*/
.k-pdf-export {
    font-family: 'DejaVu Sans', 'Arial', sans-serif !important;
    font-size: 12px;
}

/*declair DejaVu Sans font*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVu Sans';
    font-weight: bold;
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVu Sans';
    font-style: italic;
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVu Sans';
    font-weight: bold;
    font-style: italic;
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf') format('truetype');
}

And this is how the client data renders in the PDF file:

Resulting PDF

Conclusion

The above tips and tricks are good for exporting simple forms directly from the browser.

But if your form is more complex or large, we suggest you have a look at other options for creating PDF files: