How to print only image on my web page?
I have a web page which creates Barcodes. I want to print this Barcode to the sticker. That is why I want to print only selected area(only barcode) and I don't want to print header and footer of the webpage.Only barcode.
How can I do this problem?
开发者_开发技巧Thank your for your attention!!!
P.S The web page is created on ASP.NET with C#
First, create a print version of your CSS document which hides the header and footer.
/* print.css */
#header { display: none; }
#footer { display: none; }
Next, link the stylesheet in the head of your HTML document as the "print" stylesheet:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
After making these changes, the header and footer will not be included in print output.
I would use CSS's @media print
to handle this:
@media print
{
/* Add this to everything that you don't want to print (your header and footer) */
.noPrint
{
display:none;
}
/* You could also reference your header and footer containers specifically */
#headerContainer
{
display:none;
}
#footerContainer
{
display:none;
}
}
If you want to keep your print CSS seperated in another file, add the media="print"
attribute to your link
tag:
<link rel="stylesheet" type="text/css" href="printCSS.css" media="print">
Note: If you're simply defining a noPrint
CSS class, I see no reason to create a whole new CSS file to house that simply class definition.
I'd create a custom css class for printing. Just specify the media attribute.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Check out this tutorial.
精彩评论