6

I have an html page i want to print a portion of this html page, I know a javascript function to print a page,

onClick="javascript:window.print(); return false;

but how can I print a portion of a page?

If anyone has an idea, please share it with me.

yoozer8
  • 7,361
  • 7
  • 58
  • 93
tibin mathew
  • 2,058
  • 10
  • 41
  • 51

4 Answers4

9

You should use a separate css for the print media. This allows you to hide/show portions of the page when it gets printed.

html :

<div class="dont-print-that">
   blah
</div>
print this!

include:

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

print.css

.dont-print-that{display:none;}

The other solution is to open a new window with only the content you want to print. You could either do that in a popup or an iframe. Personally I find the CSS solution more elegant, but that's up to you.

marcgg
  • 65,020
  • 52
  • 178
  • 231
2

It can be done using JavaScript and iframes:

  1. Dump the innerHTML of the container into the iFrame (plus any print-specific CSS
  2. print the iFrame contents.

Try it out in JSFiddle

You can see the code here, but it won't work due to what are probably security limitations in StackOverflow's renderer. 

const printButton = document.getElementById('print-button');

printButton.addEventListener('click', event => {
  // build the new HTML page
  const content = document.getElementById('name-card').innerHTML;
  const printHtml = `<html>
      <head>
          <meta charset="utf-8">
          <title>Name Card</title>
      </head>
      <body>${content}</body>
  </html>`;
      
  // get the iframe
  let iFrame = document.getElementById('print-iframe');
  
  // set the iFrame contents and print
  iFrame.contentDocument.body.innerHTML = printHtml;
  iFrame.focus();
    iFrame.contentWindow.print();
  
});
<h1>Print your name badge</h1>
<div id="name-card" class="card">
  <p>Hello my name is</p>
  <h2>Max Powers</h2>
</div>
<p>You will be required to wear your name badge at all times</p>
<a id="print-button" class="btn btn-primary">Print</a>

<iframe id="print-iframe" width="0" height="0"></iframe>
Adonis Gaitatzis
  • 3,189
  • 26
  • 24
1

If you want to implement multiple "Print this section" features on a page, then print media stylesheets (described in other answers) are the way forward…

… but combine that with alternative stylesheets so you can switch to one for each section.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

You can apply a CSS style to hide everything but what you want printed for media="print" using Javascript.

You can also load the page in another window or a [hidden] <iframe> and print that.

strager
  • 88,763
  • 26
  • 134
  • 176
  • 1
    I'm not sure I understand your answer, but there's no need to use javascript. Browsers repaint the page using the correct css when printing. – Alsciende Mar 17 '10 at 10:36
  • @Alsciende, I know that. I understood the question as wanting to print only a very small portion of the document, not the entire document. I meant he can insert the CSS rules for the print medium before printing starts so everything except that small portion is hidden. – strager Mar 17 '10 at 20:13