如何使用打印按钮从 html 页面中仅打印一个 div 内容答案

【问题标题】：How to print only one div content from html page using print button如何使用打印按钮从 html 页面中仅打印一个 div 内容
【发布时间】：2014-10-31 04:07:47
【问题描述】：

我的 html 代码中有 2 个 div 标签。页面顶部有 1 个打印按钮。当我点击打印按钮时，它会在打印中为我提供 html 页面上的所有内容（意味着来自两个 div 的内容）。我想将此打印按钮的功能限制到仅第一个 div，并且我将在下一个 div 之前添加另一个打印按钮以独立打印该 div 内容。有什么办法可以做到吗？

    <html>
     <body>
      <input type="button" value="Print" class="noprint" onclick="window.print();return false;">
       <div>
          ...
          //my content.Want to print only this div when I will click print button.
          ...
       </div>
       //I will add another print button here which will allow me to print the next div.
       <div>
         ...
          //my content
         ...
        </div>
      </body>
     </html>

【问题讨论】：

标签： html css

【解决方案1】：

@media print {
   * 
    {    
     display: none !important;
    }

   .printable
    {
     display: block !important;
    }
}

然后将可打印类添加到您要打印的 div 中。

【讨论】：

【解决方案2】：

试试这个

$(document).on('click','#pring1',function(e){
    $('#printCSS').remove();
    $('head').append('<link href="stylesheetForBox01.css" media="print" id="printCSS">');
});

$(document).on('click','#pring2',function(e){
    $('#printCSS').remove();
    $('head').append('<link href="stylesheetForBox02.css" media="print" id="printCSS">');
});

在 stylesheetForBox01.css 页面中

#box1{
    display: none;
}

在 stylesheetForBox02.css 页面中

#box2{
    display: none;
}

【讨论】：

【解决方案3】：

我建议对此使用媒体查询，例如：

@media print {

    .div1 {display:block;}
    .div2 {display:none;}

 }

这将有效地隐藏 div2（您需要为元素命名），同时保留 div1。

有关示例，请参阅 http://jsfiddle.net/576ttew8/。

此外，您可以使用@media print 进一步设置您的 div 样式，以便它以可打印的形式呈现得更好。

有关@media print（和其他媒体查询）的更多信息，请参阅http://www.w3schools.com/css/css_mediatypes.asp

【讨论】：