How to print a portion of an HTML page?

问题

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.

回答1:

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.

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/2461275/how-to-print-a-portion-of-an-html-page