开发者

How to print only image on my web page?

开发者 https://www.devze.com 2023-04-13 05:44 出处:网络
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

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号