Question

我的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>

Answer 1

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

   .printable
    {
     display: block !important;
    }
}

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

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

Answer 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

如何使用打印按钮从html页面只打印一个div内容

3 个答案: