二维码生成/保存/打印

qrcodejs2生成二维码
js 保存二维码图片
js 居中打印二维码
body内容

qrcodejs2生成二维码

需引用qrcodejs2

 try {if (this.qrStyle && this.qrStyle.text) {if (this.qrCode) {this.qrCode.clear(); // 清除二维码this.qrCode.makeCode(this.qrStyle.text); // 生成另外一个二维码} else {this.qrCode = new QRCode(this.$refs.qrCodeBox, this.qrStyle);}} else {this.$message.error("二维码生成参数为空");}} catch (e) {console.log(e)this.$message.error(e)}

js 保存二维码图片

     try {//找到需要转换的canvasvar data = this.$refs.qrCodeBox.children[0].toDataURL().replace("image/png","image/octet-stream;"); //获取二维码值，并修改响应头部。var filename = `${this.hint||this.qrContent}.png`; //保存的图片名称和格式，canvas默认使用的png格式。这个格式效果最好。var save_link = document.createElement('a');save_link.href = data;save_link.download = filename;save_link.click()} catch (e) {console.log(e)this.$message.error(e)}

js 居中打印二维码

利用隐藏的iframe进行window.print()可以防止当前页面布局混乱(特别是Vue项目)

       var content = this.$refs.printBox.innerHTML;var iframe = document.createElement('iframe');var f = document.body.appendChild(iframe);iframe.id = "myIframe";iframe.setAttribute('style', "display:table;position:relative;width:0px;height:0px;top:-10px;left:-10px;");var w = f.contentWindow || f.contentDocument;var doc = f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);var qrBox = doc.getElementById("qrCodeBox");var ptStyle = this.printStyleif (!ptStyle) {ptStyle =`display:table-cell;vertical-align:middle;position:absolute;top:50%;left:50%;margin-top:-${this.qrWidth/2};margin-left:-${this.qrHeight/2};`}qrBox.setAttribute('style', ptStyle)var div = doc.getElementById('hint')var isShowHint = this.isPrintHint && this.hintdiv.style.display = isShowHint ? 'inline' : 'none';doc.close();w.focus();w.print();document.body.removeChild(iframe)w.close();} catch (e) {console.log(e)this.$message.error(e)}

body内容

 <div ref="printBox" class="code-image"><div id="qrCodeBox" ref="qrCodeBox"></div><div id="hint" class="print-info">{{hint}}</div></div>

二维码生成/保存/打印相关推荐

vue二维码生成和打印
二维码生成存放二维码 <div id="qrCode" class="qrCode"><div id='code' class=" ...
JAVA实现QRCode的二维码生成以及打印
喜欢的朋友可以关注下,粉丝也缺. 不说废话了直接上代码注意使用QRCode是需要zxing的核心jar包,这里给大家提供下载地址 https://download.csdn.net/download ...
vue二维码生成、打印及识别
生成二维码引入QRCode模块 npm install --save qrcode import QRCode from 'qrcode'; 页面代码批量创建二维码及打印,所以加了个v-for & ...
条形码和二维码生成以及打印
一.生成条形码 jsp页面引入js: <META content="IE=9" http-equiv="X-UA-Compatible"><s ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
java 二维码生成及其标签打印
本文主要内容二维码生成二维码标签预览及打印二维码生成笔者此次的二维码是通过调用第三方接口生成的,具体流程如下: 根据规范要求调用第三方接口,返回二维码下载地址及二维码图片的属性值(图片大小等) ...
java实现二维码生成及调用打印机打印
在开发二维码打印的过程中走过几次弯路,所以在这里特意将其记录下来留作备忘.一开始参考其他博主写的文章,有介绍通过编写JAVA后台代码来获取本地默认打印机的驱动实现打印.BUT!这样就导致在本地开发测试 ...
关于微信公众号生成二维码如何保存到相册
今天写项目遇到一个保存二维码的问题,再次记录下使用这个插件生成的二维码,在公众上面长按二维码无法保存到相册,在手机上查看发现没有img元素,因此长按不识别. 方法一所以又装了个插件通过上面的方法 ...
springboot2整合二维码生成二维码图片及输出web端及打印
step1 导包 <dependency><groupId>com.google.zxing</groupId><arti ...

二维码生成/保存/打印

二维码生成/保存/打印

qrcodejs2生成二维码

js 保存二维码图片

js 居中打印二维码

body内容

二维码生成/保存/打印相关推荐

最新文章

热门文章