526互联

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

发布时间 2023-05-30 23:11:38作者: wstong

最近因为需要在前端生成二维码并打印二维码及相关内容，使用了jquery，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();

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