700字范文 > html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能

html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能

时间：2021-01-04 02:25:50

先上效果图：

打印页面（数据皆为瞎扯）：

打印预览：

打印功能是调用window.print()实现；

二维码生成是使用jquery.qrcode插件实现；

完整页面代码：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Home</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="assets/cssPrint/bootstrap.min.css"><link rel="stylesheet" href="assets/cssPrint/font-awesome.min.css"><link rel="stylesheet" href="assets/cssPrint/bootstrap-table.min.css"><link rel="stylesheet" href="assets/cssPrint/animate.css"><link rel="stylesheet" href="assets/cssPrint/newStyle.css"></head><style type="text/css">td {text-align: center;background: white;border: 1px solid #000000;color: black;}@media print {.print-padding {position: absolute;padding: 12% 8% 0 3.1%;z-index: 10;}}@page {margin-top: 0;margin-bottom: 0;}#print_box {position: static;}#print_box > img {position: absolute;z-index: 5;margin: 15px -40px;}.table {margin-bottom: 5px;}#qrcode {position: absolute;margin-top: -127px;margin-bottom: 0;}</style><body class="gray-bg"><div class="wrapper wrapper-content animated fadeInRight"><div class="ibox-content" id="print_box"><img src="assets/img/licensebg.png" class="visible-print-block"/><div class="print-padding"><div style="float: contour"><div style="margin:0 -15px;text-align: center;"><p style="font-family: 宋体; font-weight: bold; font-size: 21pt;color: black;letter-spacing: 0.2em;margin-bottom: 10px;">窝而窝俱乐部</p><p style="font-family: 宋体;font-weight: bold;font-size: 36pt;color: black;"> 通行证</p></div></div><div class="row u3-container" style="margin-bottom: 10px;"><div class="col-md-6 col-sm-6 col-xs-6 text-center" style="font-weight: bold;color: black;">许可类型：一般通行许可</div><div class="col-md-6 col-sm-6 col-xs-6 text-center" style="font-weight: bold;color: black;">许可证号：<span>ajax1024</span></div></div><div id="qrcode" class="pull-left"></div><div id="contentDiv"><table class="table"><tr><td colspan="2" style="border: 1px solid #000000;">验证网址</td><td colspan="6" style="border: 1px solid #000000;">/weixin_36323996/article/details/103480268</td></tr><tr><td colspan="2" style="border: 1px solid #000000;">有效范围</td><td colspan="6" style="border: 1px solid #000000;">窝而窝俱乐部</td></tr><tr><td colspan="2" style="width: 25%;">通行时间</td><td colspan="2" style="width: 25%;">10月22日至10月31日</td><td colspan="2" style="width: 25%;">通行次数</td><td colspan="2" style="width: 25%;">一次</td></tr><tr><td colspan="2">承运单位</td><td colspan="6">窝而窝俱乐部</td></tr><tr><td colspan="2">汽车型号</td><td colspan="2">XC60</td><td colspan="2">汽车车牌</td><td colspan="2">窝Ajax1024</td></tr><tr><td colspan="2">车身颜色</td><td colspan="2">耀目沙金属</td><td colspan="2">内饰颜色</td><td colspan="2">米色</td></tr><tr><td colspan="2" style="border: 1px solid #000000;">通行线路</td><td colspan="6" style="border: 1px solid #000000;">318川藏线、青藏线、滇藏线、丝绸之路河西走廊线、甘南川西线、青海环线、新疆南疆线、四川线、西藏山南线、云贵线。</td></tr><tr><td colspan="2" style="border: 1px solid #000000;">备注</td><td colspan="6" style="border: 1px solid #000000;"></td></tr><tr><td rowspan="2" colspan="2">发证单位</td><td colspan="2">窝而窝俱乐部</td><td>签发人</td><td colspan="3">窝而窝俱乐部</td></tr><tr><td rowspan="1" colspan="2" style="text-align: right;border-top: none;">（签章）</td><td>发证时间</td><td colspan="3">09月27日 11时42分</td></tr><tr><td colspan="2" style="border: 1px solid #000000;">注意事项</td><td colspan="6" style="border: 1px solid #000000;text-align: left;"><p style="margin-bottom: 2px;">1.申请人必须服从管理人员的检查、鉴定、指挥；</p><p style="margin-bottom: 2px;">2.必须按照本证规定的时间、路线行驶，不得擅自变更；</p><p style="margin-bottom: 2px;">3.该证不得涂改、伪造、租借、转让，过期无效，违者按有关规定处理；</p><p style="margin-bottom: 2px;">4.申请人可在网络自行打印本证；</p><p>5.扫描本证左上角二维码或登录验证网址输入许可证号实现验证。</p></td></tr></table><div class="row"><div class="col-md-12"><div class="pull-left u3-container" style="font-size:12pt;">窝而窝俱乐部监制</div><div class="pull-right u3-container" style="font-size:12pt;">打印日期：<span id="printTime">09月27日 11时42分</span></div></div></div></div></div></div><div class="container hidden-print" style="margin-bottom: 15px;padding-right: 0;text-align: right;"><input id="protocolCheck" name="checkbox1" type="checkbox" style="vertical-align:top;cursor:pointer;"><span> 我已仔细阅读并接受<a target="_blank"><ins>《免责声明》</ins></a></span><button id="printBtn" type="button" disabled="disabled" class="btn btn-success btn-xs col-md-offset-1"><i class="fa fa-print" aria-hidden="true"></i> 打印</button></div></div><script type="text/javascript" src="assets/js/jquery.min.js"></script><script type="text/javascript" src="assets/js/bootstrap.min.js"></script><script type="text/javascript" src="assets/js/jquery.qrcode.min.js"></script><script>//打印通行证$("#printBtn").click(function () {window.print();});// 免责声明多选框的点击事件$("#protocolCheck").click(function () {var checked = $(this).prop("checked");if (checked) {$("#printBtn").removeAttr("disabled");$("#saveEnclosure").removeAttr("disabled");} else {$("#printBtn").attr("disabled", "disabled");$("#saveEnclosure").attr("disabled", "disabled");}});//中文编码格式转换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;}//生成二维码$("#qrcode").qrcode({//render: "table", 渲染方式有table方式（IE兼容）和canvas方式width: 100, //宽度height: 100, //高度text: utf16to8("ajax1024"), //内容typeNumber: -1,//计算模式correctLevel: 1,//二维码纠错级别background: "#ffffff",//背景颜色foreground: "#000000" //二维码颜色});</script></body></html>

demo已在csdn上传，下载地址：

/download/weixin_36323996/13026257

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。