1

ここでは、ネストされた 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;  
    });

これは私のために働きますか..誰かが私を助けてくれますか..

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 が提供する 2 番目のオプションは、実装が非常に簡単です。

次のスタイルシートをページに追加します

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

print次に、印刷する要素にクラスを切り替えます。

于 2013-05-09T02:59:21.347 に答える