打印 JavaScript 时不显示二维码答案

【问题标题】：QR CODE not showing when printing JavaScript打印 JavaScript 时不显示二维码
【发布时间】：2022-01-26 15:09:22
【问题描述】：

我有一个想要打印的二维码。二维码在页面中显示正常，但是当我尝试打印时它没有显示。

在主页 -

在打印页面中-

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二维码

<script>
 var qrcode1 = "{{Auth::guard('vendor')->user()->VendorURL}}";
 jQuery(function(){
    jQuery('#qrcode').qrcode(qrcode1);
 })
</script>

二维码打印代码

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();

【问题讨论】：

那么这个随机库是做什么来生成二维码的呢？我猜这是背景颜色而不是图像。并且您设置为不打印背景颜色....
下面给出的jquery生成的二维码
你找到的库是用什么生成二维码的？看起来您需要找到一个生成图像而不是带有背景颜色的 HTML。
这段代码不是我写的，但必须解决这个错误
我知道....我要求您弄清楚它产生了什么。实际检查输出并查看库为 QR 码创建的内容。您对问题的解决方案是......找到一个不同的库。

标签： javascript php jquery laravel printing

【解决方案1】：

我有这个解决方案 - 将二维码转换为图像

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);
}

【讨论】：

【解决方案2】：

只需从打印预览页面启用背景图形，点击更多设置就可以看到了

【讨论】：