Jump to content

How to take printout without header and footer


Saurabh Jain

Recommended Posts

On 11/4/2017 at 2:46 AM, Saurabh Jain said:

I want to take out print of various section without header only of content or topics   possible ?

You need to create a style sheet (or inline CSS) that will only render on print out using the 

media="print"

attribute, like this:

<style type="text/css" media="print">
  
  /* Your print-only CSS styles go here */
  
</style>

Then, assign classes to the header and footer elements (probably the most outward DIV for each so all of the child elements are contained) that in your print styles, are set to 

display: none;

For example:

<style type="text/css" media="print">
  #NoPrintHeader {
    display: none;
  }
  #NoPrintFooter {
    display: none;
  }
</style>

This is a very, very simple example - it will likely be much more complicated to get the formatting and styling into an acceptable print-friendly format. One way to quickly work on this is to use Chrome's Developer Tools (F12 on your keyboard, or right-click and choose Inspect Element). and then under the Rendering tab (located with the Console tab) under "Emulate CSS media", set the drop down to "print". From there you can see how your elements hide, font styles and sizes change, etc. Using the print preview too is another way to test (without having to print out tonnes of paper).

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...