javascript - 如何使用 jquery 向客户端机器触发打印请求

标签 javascript jquery

在这里,我嵌套了 div..其中动态生成图像...这是 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;  
    });

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

最佳答案

您必须打开新窗口并仅加载图片。之后你在其中触发 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 类切换到您要打印的元素即可。

关于javascript - 如何使用 jquery 向客户端机器触发打印请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16453548/

相关文章:

javascript - 更改对象属性以匹配给定数组中的值

javascript - jQuery 验证器异步调用

使用 CSS 和 SASS 无法正确翻转的点击 jQuery div 翻转动画

javascript - jQuery 输入参数未定义

javascript - Bootstrap 开关检查事件?

javascript - CanvasJS 多图表

javascript - 使用 serializeArray() 访问自定义属性

jquery - 可以直接在Reactjs中使用Jstree。 ReactJS中有jstree的替代品吗

javascript - 为什么这个跨域请求解决方法有效?

javascript - 将整个 html 表传回服务器并替换数据库表?