jquery.qrcode 批量打印
公司让做一个二维码批量打印功能,上网上找资料找了半天,都没有介绍关于怎么利用jquery.qrcode进行批量打印的,没办法只能自己想办法了。网上的都是利用
jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content});
这种通过id来进行生成二维码的,这种情况只能生成一个,那么通过什么办法生成多个呢?
既然能通过获取id的方式生成二维码,那么我在js中通过for循环生成div,然后给这个id赋值,然后再调用上面的那个语句是否可以生成呢,当然id是一个变量。没想到竟然成功了,记录下来代码:
<div >
<div class="float-right">
<button type="button" id="btnSave" οnclick="PrintArticle()" runat="server" >打印</button>
</div>
</div>
<div id="qrcode">
</div>
<!-- 二维码控件 -->
<script type="text/javascript" src="scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.qrcode.min.js"></script>
<script src="scripts/jquery.jqprint-0.3.js"></script>
<script>
for (var i = 0; i < 10; i++) {
$("#qrcode").append("<div>woshi dddee<br/><img id='x" + i + "' width='120px;' src='' /><div id='" + i + "'></div> </div>");///必须加一个image,不加在打印的时候没值。不相信可以将PrintArticle隐藏的部分放开,然后将打印的隐藏掉。
$('#' + i).qrcode(utf16to8(i.toString() +"中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人"));
var img = document.getElementById("x" + i.toString()); /// get image element
var canvas = document.getElementsByTagName("canvas")[i]; /// get canvas element
canvas.style="display:none";///将生成的隐藏起来。
img.src = canvas.toDataURL(); /// update image
}
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
function PrintArticle() {
$("#qrcode").jqprint({
debug:false,
importCSS:true,
printContainer:true,
operaSupport:false
});
//var pc = document.getElementById("qrcode");
//var pw = window.open('', '', 'width=500,height=400');
//pw.document.write('<html>');
//pw.document.write('<head>');
//pw.document.write('<title>ASP.NET网页打印测试</title>');
//pw.document.write('</head>');
//pw.document.write('<body>');
//pw.document.write(pc.innerHTML);
//pw.document.write('</body>');
//pw.document.write('</html>');
//pw.document.close();
//setTimeout(function () {
// pw.print();
//}, 500);
return false;
}
</script>
转载于:https://www.cnblogs.com/caidie/p/10132475.html
jquery.qrcode 批量打印相关推荐
- 批量打印之jquery局部打印
上个月弄了个批量打印的功能,觉得以后可能用得着,就写个博客记一下,免得忘记了.说这个之前,先来说一下我用过的两个打印插件,一个是Jquery打印插件(这次开始用的),一个是smsx.cab控件的打印插 ...
- lodop jquery.qrcode打印二维码
记录下lodop jquery.qrcode打印二维码:参考价值在me.CreateOneFormPage (): 具体去我的下载里边找demo: 方法具体代码如下: var LODOP; //声明为 ...
- 得力标签批量打印二维码
得力标签批量打印二维码 最近公司要求做一个二维码标签打印, 网上搜索了很多..期间实验了多种方案: 1 javax.print 打印(离线本地打印,无法做到只要用户有打印机就可以) 2 网页打印(将图 ...
- vue实现二维码批量打印功能
vue实现二维码批量打印功能 业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
- 快递鸟电⼦⾯单批量打印流程与注意事项
快递鸟作为全球最⼤的第三⽅物流接⼝服务商,电⼦⾯单可⼀次性对接40家主流快递快运公司接⼝,免费试用,调⽤接⼝时快递鸟会向物流公司请求单号,并实时返回,可直接打印电⼦⾯单发货. 一.支持快递快运公司编码 ...
- 用PDFPrint进行PDF文件的批量打印
用PDFPrint进行PDF文件的批量打印 一. 程序索取QQ:1980687127 二. 运行界面截图 三. 使用说明(程序包含PDFPrint.exe PDFPrint.dll PDFPrintS ...
- NodeJs+VueJs +前端实现批量打印二维码
第一步 :html 设置DIV,用于存放批量生成的二维码 <div class="x_panel" style="margin:0 auto;display:n ...
- html 多个分页连续打印机,web使用window.print()实现分页批量打印。
写了有关于web客户端打印物料条码的功能.想着以后可能会用到,就把他给写下来了. 主要参考了:https://blog.csdn.net/ww130929/article/details/719771 ...
- web使用window.print()实现分页批量打印。
写了有关于web客户端打印物料条码的功能.想着以后可能会用到,就把他给写下来了. 主要参考了:https://blog.csdn.net/ww130929/article/details/719771 ...
最新文章
- 视频动作识别--Towards Good Practices for Very Deep Two-Stream ConvNets
- python使用教程pandas-python使用pandas处理excel的方法
- Python 打包 exe 程序避坑指南:没有安装包也能运行小程序啦~开心
- class转java_java动态代理实现与原理详细分析
- 用两个文件a.txt;b.txt.使用linux命令,复制,a.txt文档倒数第十行的记录to b.txt文档
- Effective Java之对于实例控制,枚举类型优于readResolve(七十七)
- 2017.3.31 spring mvc教程(六)转发、重定向、ajax请求
- 三年Java开发,java基础常问面试题
- 上海浦东新区公共租赁住房申请攻略
- 常用adb shell命令大全
- Learning SQL2
- 抖音java表白教程_抖音vbs表白代码制作方法分享
- android 高德地图 java.lang.UnsatisfiedLinkError: Native method not found: com.autonavi.amap.mapcore.MapC
- 人体姿态估计-CPN(三)
- 【转】phpcms授课学习
- 人工智能安全(二)—攻击
- Vue生命周期 (图解+代码解析)
- 计算机组原理ppt,计算机组原理1.ppt
- 自动化办公:教你如何快速合并Excel文件
- 河北大学秋季计算机课,MOOC与大学计算机课程建设研讨会暨主题教学沙龙活动在河北大学召开...
热门文章
- 【GPU Gems 学习笔记】Rendering Water Caustics
- 谷歌地图api 微信小程序_使用Google的融合位置提供程序API进行实时位置跟踪
- 洛谷P4711 【化学】 相对分子质量 简单题解
- 前端JavaScript的学习笔记
- [置顶]生鲜配送管理系统_升鲜宝V2.0 销售订单汇总_采购任务分配功能_操作说明...
- Ubuntu安装KVM虚拟机
- oracle 认识点概述(一)
- KONG (API网关) 用CORS处理跨域,针对:非简单请求
- 自己动手撸一个Jlink-TinyJlink诞生记
- 怎么mac ftp服务器文件夹,mac 访问 ftp服务器文件夹权限