jquery.qrcode.js 和 jQuery.print.js 简单使用

<!DOCTYPE html>
<html>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jQuery.print/1.6.2/jQuery.print.min.js"></script>
    <div id="print_content">
        <div id="qrcode"></div>
        <br>姓名: 张三<br>性别: 女<br>身份证: 44044019990217444X<br>体检日期: 20230530<br>识别号: 2023053044044019990217444X<br>
    </div>
    <button id="print">打印</button>

    <script>
        $('#print').click(function(){
            $('#qrcode').qrcode("2023053044044019990217444X");
            $('#print_content').print();

            // 界面不生成二维码打印
            // const div = document.createElement('div');
            // div.innerHTML = '';
            // div.id = 'wstong_qrcode'
            // document.body.appendChild(div);
            // $('#wstong_qrcode').qrcode('2023053044044019990217444X');
            // var qrcSrc = $("div[id='wstong_qrcode'] canvas")[0].toDataURL();
            // $("div[id='wstong_qrcode']").remove();
            // var tmp = '<div><img id="qrcode_img" src="'+qrcSrc+'"><br>姓名: 张三<br>性别: 女<br>身份证: 44044019990217444X<br>体检日期: 20230530<br>识别号: 2023053044044019990217444X<br></div>'
            // $(tmp).print();
        })
    </script>
</html>

image

posted @ 2023-05-30 23:03  wstong  阅读(183)  评论(0编辑  收藏  举报