I have a Qr code which i want to print. Qr code is showing fine in the page but when i try to print it it's not showing.
in print page -
Html
<div class="container" id="printarea">
<div class="card"style="height: 386px;">
<div class="card-body">
<center>
<div id="qrcode"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Powered by <img src="{{env('APP_URL')}}/public/{{$app_setting->webLogo}}" class="logo-icon" alt="logo icon" style="width:40px;">
</center>
</div>
</div>
</div>
JQuery Qr Code
<script>
var qrcode1 = "{{Auth::guard('vendor')->user()->VendorURL}}";
jQuery(function(){
jQuery('#qrcode').qrcode(qrcode1);
})
</script>
Qr code printing code
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.innerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>QR Code</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
I have get this Solution - Converting the QR Code to an Image
var canvas = $('#qrcode canvas');
var img = canvas.get(0).toDataURL("image/png");
newWin = window.open("");
var ig = '<p style="text-align: center;">Powered by <img src="{{env('APP_URL')}}/public/{{$app_setting->webLogo}}" class="logo-icon" alt="logo icon" style="width:40px;"></p>';
newWin.document.write("<h3 align='center'>QR Code</h3>");
newWin.document.write('<img style="display: block; margin: 0 auto;" src="'+img+'"/>');
newWin.document.write(ig);
setTimeout(function() {
newWin.print();
newWin.close();
}, 250);
}
Just Enable Background Graphics from print preview page, Click on more settings you can see it