Skip to content

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

by on February 19, 2013

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 image
  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 updateimage
  4. Stop Editing
  5. Test print button

image

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!

image

<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

Advertisements
20 Comments
  1. Vitor permalink

    Hi, can you explain better the step 3? I’m stuck in there. I’m very good using EPM 2010, but this is my first experience using Sharepoint Designer. Thanks.

    • Vitor permalink

      I mean… You edited html using Sharepoint Designer. That is correct?

  2. there is no editing in sharepoint designer – edited on form page
    List > ribbon > customize list section > edit form web parts > Display form (usally you only need it on the display form)

    Add the web part right on the SharePoint web interface, not in sharepoint designer

  3. Nice tip – thanks! Works great.

  4. ale permalink

    i am able to install the button but it doesn’t actually print. Any troubleshooting tips?

  5. Ebony permalink

    Same issue for me. Print button is there but no actual print out. I am able to print the page from the browser with no problem. Any suggestions?

  6. Eric J permalink

    I’m getting 4-5 blank pages after the list data. Any ideas as to why, or a fix?

  7. Leslie permalink

    Hi have the same problem as ale. The print button is on the screen, but it doesn’t actually send anything to the printer. I can print the page from the browser. I don’t know anything about jquery; how to test it or even how to find it.

  8. Used IE11 Dev tools to debug and found that the single quotes around .printMe did not encode correctly (for me at least) when I copied and pasted to a text file. With the Dev Tools open on the SharePoint page was testing, select “DOM Explorer”>>then click the “Select Element” button. With that button active, select the Print button created by the webpart/jquery and you will see the debug errors displayed. For me, the error showed up as boxes around that part of the statement. Open your text file, replace the existing with real single quotes, and you’ll be g2g!!
    Thanks for this script.

  9. Amit Kumar Verma permalink

    Perfect …

    I think there is only one thing need to update
    $(‘.printMe’).click(function() as $(‘.printMe’).click(function()
    single code as (‘) used as (‘)

  10. yes, wordpress often reencodes quotes when posted – always check your single and double quotes when copying from the web!

  11. Very nice, thank you.
    I also changed the :

    $(‘.printMe’).click(function() {
    to
    $(“.printMe”).click(function() {

    perfect

    • that is mostly because wordpress changes my quotes to left and right quotes ^_^

      When in doubt, fix all the quotes on copied script – better yet, type it out yourself – I find this helps me wrap my head around another persons programming

  12. Barry Turnmeyer permalink

    Thanks for the post. I was able to get it to print however it’s printing 7 pages rather than just the 3 pages of the form. It’s also printing the entire window, is there a way to only print the form and not the entire website screenshot?

    • Without seeing it myself, I am not sure – you may need a plugin, or just try specifying the Div you want to print by ID/Class, etc.

  13. Jeremy permalink

    Thank you so much! Now to maximize the printed view.

  14. This is the second method I’ve tried to print but it doesn’t work for me, I get the print button but I get an error dialog when I click the button.
    I’m using sharepoint 201 foundation, should it work?

    • Yes it should work for 2010 – but I would need more info.

      You should have a good understanding of javascript to get this working

Trackbacks & Pingbacks

  1. How To Fix Simple Form Error Notification in Windows

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: