print only image on click

by Akram kamal

HTML

<script src="https://rawgit.com/tanathos/jquery.jqprint/master/jquery.jqprint-0.3.js"></script>
<div id="dialog">
    <img src="https://api.qrserver.com/v1/create-qr-code/?data=sample&amp;size=200x200" alt="" title="" id="qrcode"  />

<input type="button" value="print" id="printQr" />
<div>

CSS

[id="qrcode"] {
    display:none;
}
[id="qrcode"]:first-of-type {
    display:inline
}
#dialog{display:none;}
@media print {
    [id="qrcode"] {
        display:inline;
        padding:1em;
    }
}

JavaScript

for (var i=0;i<5;i++){
    $("#qrcode").clone().prependTo("#dialog")
}

$('#printQr').click(function () {
   $("#dialog").jqprint()
});
$( "#dialog" ).dialog();