Increase size of PDF Button on MS Toolbar/Create new PDF Button

Hi,

How can I increase the size of the PDF button on a SP Toolbar?

This is really small and some users won't see this if they need to export the contents for whatever reason.

image

Hello @Qman,

You can change the icon size using CSS. Also, I would suggest changing the color of the icon, as now it blends in with the background.

i.ms-Icon.ms-Icon--PDF {
    font-size: 30px;
    color: white;
}
2 Likes

Hi,

Is it possible to move it's position to the center of the Tool bar or perhaps move it next to the Close & SAVE button?

Also is it possible to add some text like: 'export as PDF' next to the PDF button on the SP Toolbar? If not, no worries.

@DryChips,

You can hide the default Export to PDF icon using this CSS:

.fd-toolbar-side-commands {
    display: none !important;
}

And add button to the toolbar with the text:

    //add new button
    fd.toolbar.buttons.push({
        icon: 'PDF',
        class: 'btn-outline-primary',
        text: 'Export to PDF',
        click: function() {
            fd.exportToPDF();
        }
    });

image

1 Like

Hi,

I have used the code above and it works! But I have ran into a problem. I have applied a page break to my form but its stopped working with the code you have provided.

Is it possible to add the page break inside the code you have provided?

Here is what I'm working with:

//PDF Settings
//This code applies a page break to the Review Field to make 'Print friendly'
fd.spRendered(function(){
fd.pdfOptions = {
forcePageBreak: '.Termination-Grid'
};
});

/This will Add a new PDF Button next to the Close Button - [Under construction]
fd.spRendered(function(){
fd.toolbar.buttons.push({
icon: 'PDF',
class: 'btn-outline-primary',
text: 'Export to PDF',
click: function() {
fd.exportToPDF();
}
});
});
/

Also, how do I move the buttons to the center of the banner?

@DryChips,

Try to define the paper size and landscape of the PDF file like this:

    //add new button
    fd.toolbar.buttons.push({
        icon: 'PDF',
        class: 'btn-outline-primary',
        text: 'Export to PDF',
        click: function() {
            fd.exportToPDF('contacts-form', {
                forcePageBreak: '.Termination-Grid'
            });
        }
    });

You can center the toolbar content using CSS:

.fd-toolbar-primary-commands {
    display: block !important;
    margin-left: auto;
    margin-right: auto;
    flex: none !important
}
1 Like

Hey,

Is it possible to add some text like 'Import to PDF' to which is next to the Original PDF Button, just like the button on the left?

I'm not going to use the PDF button on the left as it doesn't seem to adding the page break, whereas the one on the right works like a charm!

@DryChips,

Just realized that I've shared the wrong code with you.

Try this for creating a new button that exports form to PDF with page breaks.

    fd.toolbar.buttons.push({
        icon: 'PDF',
        class: 'btn-outline-primary',
        text: 'Export to PDF',
        click: function() {
            fd.exportToPDF('File_Name', {
                forcePageBreak: '.Termination-Grid'
            });
        }
    });
1 Like