Customize the Printable view of a SharePoint list form

Hi Folks,

I got a task to customize the print view of 'DispForm.aspx'. I've utilized '@print media' query to achieve the functionality.I created a custom CSS file to add the '@print media' query.

The CSS file look as below.
#logo img{
display:none;
 }
 h2
 {
font-weight:bold;
 }
h3
{
font-weight:bold;
}
#tabHead
{
display:none;
}
#tabFooter img{
display:none;
}

@media print 
{
 nobr
 {
  font-weight:bolder;
  font-size:22px;
  font-family:Arial;
 }
 .ms-formbody
 {
font-size:22px;
font-family:Arial;
 }
 #logo img
 {
display:block;
height:80px;
direction:ltr;
top:auto;
 }
 .ms-standardheader
 { 
background-position:center;
text-align:left;
 }
 #tabPos > tbody:nth-child(2)
 {
padding-right:15px;
`}
 #tabPos
 {
text-align:left;
border:2;
width:80%;
 }
 #WebPartWPQ2 > table > tbody > tr:nth-child(3) > td
 {
 }
 .hideField
 {
display:none;
 }
 #WebPartWPQ2 > table > tbody > tr:nth-child(4) > td > table
 {
display:none;
 }
 #tabHead
 {
display:table-cell;
font-size:24px;
font-family:Arial;
 }
 #tabFooter img
 {
display:block;
 }
}

The print view would be displayed as shown below.

It helped me a lot and we can use it for future purpose.

Thanks,

JS Link use to display image hyperlink to List view column

Hi All,

I had a task to display an image hyperlink for the list view column. By clicking the image it will navigate to a page which is styled in print view of page.

At first, I added a single line of text field - PrintForm. Then I create a custom standard view- Print View. 'PrintForm' will be available in 'PrintView.aspx'.
I edit the page at first and then edit the web part which contains the web part.
I wrote a small JS code to achieve the functionality.

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  Templates: {
Fields: {
           'PrintForm': {'View':function(ctx) {         
           return String.format("<a href='<CustomizedDisplayForm>.aspx?ID={0}' target='_blank'><img src='<ImageUrl>' width='42' height='42'></a>",  ctx.CurrentItem.ID);
}}

        }//Fields
  }//Templates
});
})


Once I completed the JS code, I appended the path of .js file to JS link in Miscellaneous section. After I saved the changes, the view would like as shown below.

Thanks for reading my post, I'll write another for print section.