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

我在我的html代码中有2个div标签，我在页面顶部有1个打印按钮。当我点击打印按钮时，它给我在印刷品上的一切都在我的HTML页面上（意味着来自两个div的内容）。我想限制此打印按钮的功能，直到1st div，我将在下一个div之前添加另一个打印按钮，以独立打印该div内容。有什么办法可以做到这一点？如何使用打印按钮从html页面打印只有一个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>

来源

2014-10-31 Shadow Fiend

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

    .printable 
    { 
    display: block !important; 
    } 
}

然后打印类添加到您想要打印的股利。

来源

2014-10-31 04:40:58 TysonWolker

试试这个

$(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; 
}

来源

2014-10-31 04:44:23

我会建议使用媒体查询为这一个，像这样的：

@media print { 

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

}

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

查看http://jsfiddle.net/576ttew8/的例子。

此外，您可以使用@media print进一步设置div的样式，以便以可打印格式呈现更好的效果。请参阅http://www.w3schools.com/css/css_mediatypes.asp

来源

2014-10-31 04:49:03

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

回答

相关问题