Save SharePoint form as PDF with custom filename

Forms
1

Is it possible to define the filename of a printed PDF of a form? Id like to be able to print it as the list item ID with the title and date printed, for example:

567 - List Item Title - 09.12.22.pdf

2

Hello,

check out the documentation here: JavaScript framework basics — SharePoint forms

1 Like
3

I've been experimenting with using a custom button at the top my form to generate a PDF using a form field as the generated filename:

fd.toolbar.buttons.push({ icon: 'Print', class: 'btn-outline-primary', 
text: 'Export PDF Report',
click: function() { fd.exportToPDF(fd.field('FolderName').value,
 { paperSize: ['297mm', '297mm'],
 margin: '5 mm',
 landscape: false,
 multiPage: true,
 forcePageBreak: '.page-break' }); } });

The issue I'm having is incorporating the page size, margin, page break etc in the function. Am I missing something, or is not possible to use the print to PDF function in the way I am trying to? I really want the exported PDF to have a logical filename, instead of plumsail-form-xxxxxx.pdf

4

Hi,

I added this code which is connected to the SharePoint Banner/Toolbar (Add this inside fd.rendered event):

/*This code will add an export to PDF button to the SharePoint Toolbar*/
fd.toolbar.buttons.push({
        icon: 'PDF',
        class: 'btn-outline-primary',
        text: 'Export to PDF',
        click: function() {
            fd.exportToPDF('FORM NAME', {
                forcePageBreak: '.page-break'
            });
        }
});

I created the custom button using the code above:

image

The '.page-break' is a custom CSS class I have added in my cell properties window:

image

If you want to style the PDF export, you can add the following CSS code in the CSS Editor:

/*This code hides the Wizard and the Navigation buttons (NEXT, BACK & Submit) when user exports form as PDF*/
.k-pdf-export .wizard-nav, 
.k-pdf-export .wizard-progress-bar, 
.k-pdf-export .wizard-header, 
.k-pdf-export .wizard-card-footer, 
.k-pdf-export .nav-tabs,
.k-pdf-export .fd-form .fd-button,
.k-pdf-export .PDFW4Message {
display: none !important;
}

/*This will hide the PDF button*/
.fd-form .btn-link{
display:none;
}

I have this code in my form which triggers after the user submits the form (add this outside the fd.rendered event):

fd.spBeforeSave(function(){
    return fd.exportToPDF('FORM NAME',{
        forcePageBreak: '.page-break'
    })
})
5

Thanks for your reply. This is basically the same code as im currently using. Is there any way to have content fit to the defined page size? I put page breaks in where they need to be, but the exported PDF has content spilling over to a second page, where all content should scale to fit the page:

What it should look like:

CleanShot 2023-05-10 at 11.51.29
CleanShot 2023-05-10 at 11.51.29856×1015 74.5 KB

What it currently outputs:

CleanShot 2023-05-10 at 11.50.43
CleanShot 2023-05-10 at 11.50.43557×976 43.1 KB

6

Hello @Jaydius,

The code works on my form.

You can try adding the Scale property like so:

        fd.exportToPDF(fd.field('Title').value, {
            paperSize: ['297mm', '297mm'],
            margin: '5 mm',
            landscape: false,
            multipage: true,
            forcePageBreak: '.page-break',
            scale: 0.5
        });
7

Hello @Jaydius,

The code works on my form.

You can try adding the Scale property like so:

        fd.exportToPDF(fd.field('Title').value, {
            paperSize: ['297mm', '297mm'],
            margin: '5 mm',
            landscape: false,
            multipage: true,
            forcePageBreak: '.page-break',
            scale: 0.5
        });
1 Like