如何打印指示的div（而无需手动禁用页面上的所有其他内容）？
我想避免使用新的预览对话框，因此使用此内容创建新窗口没有用。
该页面包含几个表，其中一个表包含我要打印的div-该表已通过网络的视觉样式进行了样式设置，因此不应以打印形式显示。
仅打印<div id =“ printarea”> </ div>？
I found the solution.
@media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
@page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}
You could use a separate CSS style which disables every other content except the one with the id "printarea".
See CSS Design: Going to Print for further explanation and examples.
The printDiv() function came out a few times, but in that case, you loose all your binding elements and input values. So, my solution is to create a div for everything called "body_allin" and another one outside the first one called "body_print".
Then you call this function:
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}
If you only want to print this div, you must use the instruction:
@media print{
*{display:none;}
#mydiv{display:block;}
}
Best css to fit space empty height:
@media print {
body * {
visibility: hidden;
height:0;
}
#section-to-print, #section-to-print * {
visibility: visible;
height:auto;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
In my case I had to print a image inside a page. When I used the solution voted, I had 1 blank page and the other one showing the image. Hope it will help someone.
Here is the css I used:
@media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}
My html is:
<div id="not-print" >
<header class="row wrapper page-heading">
</header>
<div class="wrapper wrapper-content">
<%= image_tag @qrcode.image_url, size: "250x250" , alt: "#{@qrcode.name}" %>
</div>
</div>
<div id="to-print" style="display: none;">
<%= image_tag @qrcode.image_url, size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
I picked up the content using JavaScript and created a window that I could print in stead...
<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
window.print();
document.body.innerHTML = originalContents;
}
</script>
With CSS 3 you could use the following:
body *:not(#printarea) {
display: none;
}
嗯...使用样式表的类型进行打印...例如：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css：
div { display: none; }
#yourdiv { display: block; }
这很好用：
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>
请注意，这仅适用于“可见性”。“显示”不会这样做。在FF3中测试。
所有的答案至今是相当有缺陷-他们要么涉及添加class="noprint"到任何东西，或者会搞乱display内#printable。
我认为最好的解决方案是围绕不可打印的东西创建包装器：
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
当然这不是完美的，因为它涉及到在HTML中移动一些内容...
这是一个通用的解决方案，仅使用CSS，我已经验证可以使用。
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
替代方法不是很好。使用display是棘手的，因为如果有任何元素，display:none则任何后代都不会显示。要使用它，您必须更改页面的结构。
Using visibility works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move section-to-print to the top left so it prints properly.
The Best way to Print particular Div or any Element