Add a Quick Print Button to a Form Display In SharePoint 2010 Using Simple jQuery Snippet

Want to add a quick print button to your SharePoint when viewing a single item in SharePoint? Well here is a quick and easy way to do so.

Add a content editor web part to Display Form

NOTE: This works with dialog form views as well as in page form views

1. Library > library tab > or List > List tab
2. Ribbon > Form Web Parts > Default Display Form
3. Add a web part > content editor web part > edit html or link to .txt file in a library all users have read permissions to (I prefer this as SP will remove code layout and often break and/or rewrite it). Click OK to update
4. Stop Editing
5. Test print button

The Code

NOTE: if you already are linking to a version of jQuery, you do not need the first <script> tag – there should only be one version/instance of jQuery on a page or you will break it!

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

<script>

$(document).ready(function() {

  $(‘.printMe’).click(function() {
  window.print();
  return false;
  });

});</script>

<style>
.printMe{
    color:#666666;
    font-weight:bold;
    cursor:pointer;
}

.printMe:hover{
color:#333333;
font-weight:bold;
cursor:pointer;
}

</style>

<button class="printMe">Print</button>

NOTE: You do not have to use a button tag for the “button” – it can be a div, a span, or an image if you like! Adding cursor: pointer and :hover pseudo class styles can give you interactivity that is more flexible than a button.

NOTE: You can use more advanced print plugins to print just the content of a specific div or even create a print preview dialog