从弹出窗口打印图像

我试图在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>

但是，在这里，我点击保存按钮，整个页面将采取打印，不采取弹出式窗口图像。这是怎么发生的？

来源

2012-07-26 amtest

打印介质

@media print{ 
    body{ 
    visibility: hidden; 
    } 
    .to-print{ 
    visibility: visible; 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 
}

使用自定义的CSS现在添加.to-print类的div要打印，你的情况来img标签。

瞧瞧吧jsfiddle（它不使用模式窗口，直接装）

来源

2012-07-26 16:38:40 Sarowar

这里，如果顶部和左为0，则得到了图象的一半，只是我变成有的像20,20 有什么建议吗？ – amtest 2012-07-26 18:25:01

顶部和左侧0表示打印的内容将进入页面的左上角。它不负责一半的图像。有些东西像div尺寸*（如果你用父div打印，不仅是'img'）*或其他东西。 – Sarowar 2012-07-26 23:16:32

当我试图通过谷歌浏览器打印，这将显示一个空白页。但它确定与Firefox？发生了什么？ – amtest 2012-07-27 06:49:47

打印功能不采取截图，并打印了这一点。如果您希望能够在模态窗口中打印项目，那么您需要使用print CSS样式表，并将期望元素的可见性指定为display:block;或visibility:visible;。

来源

2012-07-26 16:39:24 RobB

试试看。无论您想要打印什么，都将它包裹在一个ID为“printme”（或任何您喜欢的）的div标签中，如下所示。

#printme { display: none; } 

@media print 
{ 

    #printme { display: block; } 
} 
</style>

<div id="printme"> 
    your image goes here 
</div>

来源

2012-07-26 16:42:05 Eric

回答

相关问题