如何在我的网页上只打印图像？答案

【问题标题】：How to print only image on my web page?如何在我的网页上只打印图像？
【发布时间】：2011-12-07 20:23:24
【问题描述】：

我有一个创建条形码的网页。我想将此条形码打印到贴纸上。这就是为什么我只想打印选定区域（只打印条形码）而不想打印网页的页眉和页脚。只打印条形码。

我该如何解决这个问题？

感谢您的关注！！！

P.S 网页是用 C# 在 ASP.NET 上创建的

【问题讨论】：

如何打印网页？导航到其他 pae 的自定义 Print 链接是否适合您？

标签： c# javascript jquery asp.net web-applications

【解决方案1】：

我会使用 CSS 的 @media print 来处理这个问题：

@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;
    }
}

如果您想将打印 CSS 单独保存在另一个文件中，请将 media="print" 属性添加到您的 link 标签：

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

注意：如果您只是定义一个 noPrint CSS 类，我认为没有理由创建一个全新的 CSS 文件来容纳该简单的类定义。

【讨论】：

【解决方案2】：

我会创建一个用于打印的自定义 css 类。只需指定媒体属性即可。

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

查看this 教程。

【讨论】：

【解决方案3】：

首先，创建一个隐藏页眉和页脚的 CSS 文档的打印版本。

/* print.css */
#header { display: none; }
#footer { display: none; }

接下来，将 HTML 文档头部的样式表链接为“打印”样式表：

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

进行这些更改后，页眉和页脚将不会包含在打印输出中。

【讨论】：