SharePoint DispForm Custom Action Button to print list item

Question

I have a Sharepoint List with a Custom Action Button displayed on the DispForm, in order to allow a user to open the normal print window with one click. I added the button using Sharepoint Designer.

The options for the button command available in Sharepoint Designer are:

Navigate to Form Initiate Workflow Navigate to URL

At the moment, I have added the following command in the Navigate to URL field:

javascript:window.print()

This prints the list item via the normal default print window. the output is a screen-grab print, which includes all the background design, which I dont want. Of course, I can manually configure my Print settings to get rid of all the Webpage clutter (background etc), but I dont want the User to have to do this every time.

I want the custom button to print the contents of the List Item in a Print Friendly way, does anyone know a better way of doing this than just calling up the javascript.window.print() command?

I considered using a CEWP in the DispForm to call up a javascript .txt file, but i’d rather use a Custom button on the ribbon.

My gold standard would be printing the List Item fields into a Word/PDF document template, if anyone knows how to do that, that would be great.

Assume I know nothing, and thank you!

Sorry if this has been asked before, please be patient with a SharePoint newbie!

Answer 1

In order to print properly, you will have to add a css file with media specificed as print only

<link rel="stylesheet" type="text/css" href="../path/to/Print.css" media="print">

Then in that css file, you selectively hide what you do not want to show up. Resize things as needed to make it look good on the page. Some basics I've used to get it to be a full page

#ms-designer-ribbon, #s4-titlerow, #notificationArea,.pagerControls, div.control,table.ms-core-tableNoSpace.ms-webpartPage-root{
    display:none !important;
}
#contentRow,#contentBox,#s4-bodyContainer{
    margin:0;
    padding:0;
    width:0px;
}
#s4-workspace{
    width:297mm !important;
    height:210mm !important;
}