Add Print Button to Display form using jQuery in SharePoint

This SharePoint tutorial, we will discuss how we can add a Print button in SharePoint 2013 list display form in SharePoint 2013 using jQuery. Through jQuery, we will be able to add a Print button into list display form. The same way we can add a Print button using jQuery in SharePoint 2013/2016 or SharePoint Online.

Add Print Button to Display form using jQuery in SharePoint

To Add the Print button, Open SharePoint list in browser, go to List Tab -> Customize List Tab -> Form Web Parts and then click on Default Display Form as shown in the fig below:

add print button to sharepoint list form
Add Print Button to Display form in SharePoint 2013 using jQuery

Then in this page, click on Add a Web Part and then from the web part Categories select Media and Content and then select Content Editor web part as shown in the fig below:

add print button to sharepoint 2013 list form
Add Print Button to Display form in SharePoint 2013 using jQuery

Then in the Content Editor web part click on Click here to add new content, then click on FORMAT TEXT -> Markup -> Edit Source as shown in the fig below:

add print button to sharepoint 2016 list form
Add Print Button to Display form in SharePoint 2016 using jQuery

Then in the HTML Souce, Add the below code as shown in the fig below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script><script>

$(document).ready(function() {
$('.printList').click(function() {
window.print();
return false;
});
});</script>

<style>
.printList{
color:#666666;
font-weight:bold;
cursor:pointer;
}
.printList:hover{
color:#333333;
font-weight:bold;
cursor:pointer;
}
</style>
<button class="printList">Print This Item</button>
add print button to sharepoint display form
Add Print Button to Display form in SharePoint 2019 using jQuery

Then click on Stop Editing and save the page. Now when you will click on any item, then the Print button will appear like below:

add print button to sharepoint 2013 display form
Add Print Button to Display form in SharePoint 2013 using jQuery

You may need following SharePoint customization tutorials:

I hope this will be helpful to add a print button in SharePoint 2013/2016/Online list form using jQuery (add a print button to sharepoint list form).

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>