我试图在bootstrap模式中显示一个图像,弹出窗口也有一个打印按钮,所以我需要拍摄该图像的打印,该图像显示在弹出窗口中。
<script type="text/javascript">
function code(){
$("#qbody").html("<p align='center'><img
src='http://chart.apis.google.com/chart?
cht=qr&chs=300x300&chl=code&chld=H|0'/></p>");
}
</script>
<div class="modal fade">
<div class="modal-body" id="qbody">
<a href='#' class='btn btn-primary pull-left'
onClick='window.print();'>Save</a>"
</div>
</div>
但是在这里我点击整个页面将作为打印的保存按钮,而不是弹出窗口图像。这是怎么回事?
答案 0 :(得分:1)
将自定义css用于打印介质
@media print{
body{
visibility: hidden;
}
.to-print{
visibility: visible;
position: absolute;
top: 0;
left: 0;
}
}
现在将类.to-print
添加到要打印的div,在您的情况下添加到img
标记。
在jsfiddle 处查看(不使用模态窗口,直接加载)
答案 1 :(得分:1)
打印功能不会截取屏幕截图并将其打印出来。如果您希望能够在模态窗口中打印该项目,那么您将需要使用print
CSS样式表,并为所需元素指定display:block;
或visibility:visible;
的可见性。< / p>
答案 2 :(得分:0)
试一试。无论您想要打印什么,请将其包装在div标签中,其ID为“printme”(或您喜欢的任何内容),如下所示。
#printme { display: none; }
@media print
{
#printme { display: block; }
}
</style>
<div id="printme">
your image goes here
</div>