首页 > 其他分享 >jquery.qrcode.js 和 jQuery.print.js 简单使用

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

时间:2023-05-30 23:11:25浏览次数:41  
标签:jquery jQuery js qrcode 2023053044044019990217444X print

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

标签:jquery,jQuery,js,qrcode,2023053044044019990217444X,print
From: https://www.cnblogs.com/wstong2052/p/17444618.html

相关文章

  • python内置库--json
    关于jsonJSON是一种按照JavaScript对象语法的数据格式相关介绍https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON很多网页和app前后端数据交换的数据的格式就是json,打开F12或者抓包工具就可以看到py的json模块常用函数相关函数介绍json.dumps()......
  • js中的宏任务和微任务
    一、初识宏任务和微任务在JavaScript中,有两类异步任务队列:宏任务队列(macrotasks)和微任务队列(microtasks)。宏任务队列可以有多个,微任务队列只有一个。1、宏任务(macrotasks):就是JS内部(任务队列里)的任务,严格按照时间顺序压栈和执行。如:script(全局任务)、setTimeout、setInterval、s......
  • 处理json
     load和loads的区别load():load()方法用于从文件中读取JSON数据,并将其转换为Python对象。它接受一个文件对象作为参数,并将文件中的JSON数据加载为Python对象loads():loads()方法用于将JSON字符串转换为Python对象。它接受一个字符串作为参数,并将其解析为Python对象 解......
  • json_decode的用法
    正常使用$arr=json_decode('{"name":"tom","age":10}',true);var_dump($arr);上面代码会输出数组错误的json格式怎么输出$arr=json_decode("name",true);var_dump($arr);//null项目里很多时候调用外部接口,有的外部接口返回json字符串,前段时间碰到了一个项目,调用......
  • python pickle to json
    ref:https://gist.github.com/Samurais/567ebca0f59c612eb977065008aad867 '''Convertapklfileintojsonfile'''importsysimportosimportpickleimportjsondefconvert_dict_to_json(file_path):withopen(file_path,&......
  • AngularJS2.0 一个表单例子——总体说来还是简化了1.x 使用起来比较自然
    <!doctypehtml><html><head><metacharset="utf-8"><title>NgForm</title><scripttype="text/javascript"src="lib/[email protected]"></script><scripttype=&......
  • AngularJS2.0 quick start——其和typescript结合需要额外依赖
    AngularJS2发布于2016年9月份,它是基于ES6来开发的。运行条件!由于目前各种环境(浏览器或Node)暂不支持ES6的代码,所以需要一些shim和polyfill(IE需要)让ES6写的代码能够转化为ES5形式并可以正常运行在浏览器中。从上图可以看出在Es5浏览器下需要以下模块加载器:systemjs -通用模块......
  • threejs绘制球体
    threejs绘制球体在Three.js中,可以使用geometry对象和geometryMaterial对象来创建和渲染球体几何体。下面是一个绘制球体的示例代码://创建一个立方体几何体varcubeGeometry=newTHREE.BoxGeometry(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5);......
  • WebClient发送get、post请求(form、json)(功能封装)
    1.情景展示Spring3.0引入了RestTemplate,但是在后来的官方源码中介绍,RestTemplate有可能在未来的版本中被弃用,所谓替代RestTemplate,在Spring5中引入了WebClient作为非阻塞式ReactiveHttp客户端。WebClient处理单个HTTP请求的响应时长并不比RestTemplate更快,但是它处理并发的能......
  • js判断本页面被 iframe 嵌套
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device......