1

在这里，我嵌套了 divs..其中图像动态生成...这是 html 代码..我的问题是如果我单击打印按钮，则需要打印相应的图像。

    <div id="outputTemp" style="display:none">
    <div id="rightoutputimgae">
    <div id="rightimgId" class="rightimg"  rel="tooltip" content="
     <img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
    <div id="outputimageId" class="outputimage">
       <img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
     </div>
     <ul>
     <li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
    <li id="outedit">
      <a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
      </a></li>
    <li id="outdelete"><a href="#" onclick="deleteImg(div11)">
    <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
    <li id="outfullscreen">
    <a href="#">
    <img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" 
      title="Full Screen"></a></li>
     <li id="outshare">
     <a href="#"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share"></a>
     <div id="menu">
     <div id="tooltip_menu">
    <a href="#" class="menu_top" id="email">
    <img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
    <a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG" 
    alt="Facebook" title="Facebook"></a>
    <a href="#" id="twitter">
    <img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
    <a href="#" class="menu_bottom" id="save">
     <img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
     </div>
     </div>
     </li>
     <li id="outprint"><a href="#">
     <img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
       </li>
     </ul>
      </div>

当我单击打印按钮时，我需要打印图像。我还需要通过单击稍后需要创建的所有按钮来打印所有图像。

Javascript

    $('.printMe').click(function() {  
    window.print();  
    return false;  
    });

这对我有用吗..有人可以帮我吗..

4

2 回答 2

3

您必须打开新窗口并在那里仅加载图片。之后，您在其中触发 window.print 。

如果这就是你要走的路，我会创建一个简单的页面来简化它

将其命名为 printImage.html，并使用类似于以下标记的内容

<html>
<script>
function onload() {
       var url = window.location.search.substring(1)
       var img = document.getElementById('img')
       img.src = url
       window.print()
}

</script>
<body onload="onload()">
<img href="" id='img' />
</body>
</html>

有了这个，你就可以在新窗口中看到类似的图像printImage.html?myfullpathtotheeimage.jpg

实际上@kennypu 提供的第二个选项很容易实现

将以下样式表添加到您的页面

@media print {
  * { display:none; }
  .print { display:block }
}

然后只需print将类切换到您要打印的元素。

于 2013-05-09T02:59:21.347 回答
2

如果您只想打印相应的图像，您有两种选择。

  1. 单击该按钮时，转到仅包含要打印的图像的不同页面，然后在window.print()那里运行。

  2. 使用媒体查询制作打印样式表：@media print并隐藏样式表中除了要打印的图像之外的所有内容

于 2013-05-09T03:02:07.400 回答