jquery 批量生成二维码并打印

批量生成二维码并在打印预览上显示

前提条件，引入jquery和jquery.qrcode.js文件

script type="text/javascript" src="./js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.qrcode.min.js"></script>

html代码

<div class="printCode">
      <div class="list twoCol" id="col" style="width: 794px;height: 1123px;border: 1px solid #b4b4b4;">
         <ul class="colBox" id="colBox"></ul>
      </div>
    </div>
    <button onclick="btnClick()" class="btn">打印</button>

生成两列二维码

//显示两列二维码
    function createMulti(codeData){
      let str = '';
      for (let i = 0; i < codeData.length; i  ) {
        str  = '<li style="width:50%;">';
        //创建放置二维码和图片的容器
        str  = '<div class="qrBg qrbg1" id=q'   codeData[i].zichan_bianhao   '>' 
        '</div><img id=qi' codeData[i].zichan_bianhao ' class="q_img" />';
        str  = '</li>'
      }
      $('#colBox').html(str);
    
    }
   //创建码
    function createCode(codeData){
      for(let i=0;i<codeData.length;i  ){
      //先清空再赋值
      document.getElementById('q' codeData[i].zichan_bianhao).innerHTML = '';
      //先生成canvas的二维码，renderweicanvas和table时直接打印会不显示
      let qrcode =  $('#q' codeData[i].zichan_bianhao).qrcode({
           render: "canvas",
           width: 100,
           height: 100,
           text: codeData[i].zichan_bianhao
         });
       let canvas = qrcode.find('canvas').get(0);
      //将二维码转换为图片
      $('#qi' codeData[i].zichan_bianhao).attr('src',canvas.toDataURL('image/jpg'));
      //先隐藏canvas的二维码
      $('.qrBg').hide();
      //显示img的二维码
      $('.q_img').show();
    }
  }
    //点击按钮打印
   function btnClick(){
    let newDomHtml = '';
    newDomHtml = $('#col').html();
     let oldContent = document.body.innerHTML;
      //将要打印的html赋给本页面
      window.document.body.innerHTML = newDomHtml;
      window.document.close(); //在IE浏览器中使用必须添加这一句
      window.focus(); //在IE浏览器中使用必须添加这一句
      //调用windows的打印接口
      window.print();
      window.location.reload();   //刷新页面
  }

效果图

这篇好文章是转载于：学新通技术网