1. 字串生成二維碼

HTML程式碼

<div class="qrcBody" id="qrcBody">
                        </div>

js程式碼

jQuery('#qrcBody').qrcode({
       width: 250,
       height: 250,
       text: "good good study, day day up! "//二維碼的內容
   });

2. 列印二維碼

HTML程式碼

<div class="qrcBody" id="qrcBodyImg" style="display:none"
 
>
    <img class= "qrcImg" src="">
    <img class="align-center-middle upLogo" src="" >
</div>

<button id="btnPrint" type="button"
      class="btn btn-primary pull-right" style="margin-left :30px">Print QRC
</button>

js程式碼

var qrcSrc = $("canvas")[0].toDataURL();//二維碼canvas轉img
 

var upLogSrc = "img/kaoshen.jpg";//二維碼中間的logo
$("#qrcBodyImg .qrcImg").attr("src", qrcSrc);
$("#qrcBodyImg .upLogo").attr("src", upLogSrc);
$("#qrcBody").hide();//隱藏canvas部分
$("#qrcBodyImg").show();//顯示img部分
 });
 
 //列印部分
$("#btnPrint").click(function(){
       $("#printContent").print({

       });

3. 列印時遇到的問題

1. 背景顏色打印不出來 background樣式要加上 !important 還有一種說法是加一個屬性：-webkit-print-color-adjust: exact;然後記得瀏覽器列印設定裡面要在“列印背景圖形”前面打勾

-webkit-print-color-adjust: exact;
 background:#007DCF !important;