网页生成二维码并实现打印的两种方式

来源：由于公司产品功能需要，要在客户回执上增加打印二维码，而用户使用的电脑甚至还有IE8的浏览器，根据工作的总结，记录下使用的两种二维码实现方式的方案，供以后参考。

方案1：使用jquery-qrcode.js插件，在页面生成可打印的二维码(经过测试，该方案不能完全支持IE8)

qrcode的渲染方式render中的Canvas是html5的东西，所以会有兼容性问题，为了实现IE8的兼容，我使用了table方式渲染，的确可以在页面上显示出二维码，但是在打印的时候却不能打印出来，table也不能转换成png图片。所以，这个方案只适合支持canvas的浏览器打印二维码。

<script language="javascript">$(function(){//页面上每一个name='controlQrcode'的div都加上二维码  $("div[name='controlQrcode']").each(function(index,element){createControlQrcode(element);})});//生成办件二维码function createControlQrcode(obj){var qrcode = $(obj).qrcode({render: canvas, // 渲染方式有table方式（IE兼容）和canvas方式，默认是canvastext: '二维码里面的内容',width: 81,//宽度height: 81,//高度colorDark : '#000000',colorLight : '#ffffff',correctLevel:3//二维码纠错级别});var canvas = $(obj).children("canvas");//将canvas转换成png图片，才能被打印机识别打印var img = canvas[0].toDataURL("image/png")$(obj).html("<img src='" + img + "'>")}
</script>

更多详细资料参考：http://blog.csdn.net/gao36951/article/details/48736329

以上方法基本能满足目前大部分浏览器打印二维码的需求，但是如果一定要在IE8上实现二维码的打印，可以参考下面的方案二。

方案二：后台生成二维码图片传到页面显示并实现打印。

需要在maven引入两个jar包
<!-- 条形码、二维码生成 -->
<dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>2.2</version>
</dependency>
<dependency><groupId>com.google.zxing</groupId><artifactId>javase</artifactId><version>2.2</version>
</dependency>

工具类QrCodeUtils.java：

package com.minstone.apprControl.system.util;import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Hashtable;import javax.imageio.ImageIO;import sun.misc.BASE64Encoder;import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.WriterException;
import com.google.zxing.common.BitMatrix;/*** 二维码生成工具类* @author ChenDongWei* @date 2017年12月27日下午4:16:33*/
public class QrCodeUtils {/*** creatRrCode:(这里用一句话描述这个方法的作用). <br/> * @author ChenDongWei* @date 2017年12月27日下午5:05:19* @param contents 二维码的内容* @param width 二维码图片宽度* @param height 二维码图片高度* @return*/public static String creatRrCode(String contents, int width, int height){String binary = null;Hashtable hints= new Hashtable();   hints.put(EncodeHintType.CHARACTER_SET, "utf-8");  try {BitMatrix bitMatrix = new MultiFormatWriter().encode(contents,BarcodeFormat.QR_CODE, width, height, hints);// 1、读取文件转换为字节数组ByteArrayOutputStream out = new ByteArrayOutputStream();BufferedImage image = toBufferedImage(bitMatrix);//转换成png格式的IO流ImageIO.write(image, "png", out);byte[] bytes = out.toByteArray();// 2、将字节数组转为二进制BASE64Encoder encoder = new BASE64Encoder(); binary = encoder.encodeBuffer(bytes).trim();} catch (WriterException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} return binary;}/*** image流数据处理* @author ChenDongWei* @date 2017年12月27日下午4:16:33*/public static BufferedImage toBufferedImage(BitMatrix matrix) {int width = matrix.getWidth();int height = matrix.getHeight();BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);for (int x = 0; x < width; x++) {for (int y = 0; y < height; y++) {image.setRGB(x, y, matrix.get(x, y) ? 0xFF000000 : 0xFFFFFFFF);}}return image;}
}

controller代码：

String binary = QrCodeUtils.creatRrCode("二维码内容", 150,150);
modelAndView.addObject("binary", binary);//将二维码传到页面

页面jsp代码：

<div name="controlQrcode" style="float: left;"><img src="data:image/png;base64,${binary }"></div>

至此，方案二实现完成。

以上两种二维码打印的实现方案，仅是个人在工作中遇到的案例，仅供参考。如有错误，请留言指正。

网页生成二维码并实现打印的两种方式相关推荐

jquery生成二维码怎么添加图片（两种方法）
github项目地址: https://github.com/fengliting/erweima 注意:这里实现的是第一个方法自动生成二维码里面添加图片,有两种方法,一种是使用jquery原生的二 ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
生成二维码，并且打印
生成二维码,并且打印出来加入依赖 //二维码依赖 npm install --save qrcodejs2 //打印依赖 npm install vue-print-nb --save 在mian文 ...
网页生成二维码把二维码变成图片下载二维码
目录网页生成二维码 1 将二维码变成图片 2 1效果:二维码变成了图片 2 下载二维码 2 1全部代码 3 网页生成二维码导入生成二维码需要的js文件(https://github.com/lrs ...
将前端网页生成二维码
不用注册域名,利用GitHub获得域名(只适用于没有后台服务器的网页) 一.生成域名 1.1.进入GitHub 打开网页所在的库(上传文件到GitHub上的两种方法) 刷新页面确定看看是否能进入你的 ...
vue中使用qrcode生成二维码并实现打印功能
问题产生背景: 客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来必要条件:vue.需要安装qrcode和vue-print-nb依赖(具体安装可自行百度) 实现思路: 当用户勾选 ...
【工厂开发：使用扫码枪生成二维码并打印】使用扫码枪用JavaScript 生成二维码，并打印二维码
在厂里做erp,有要求写一个扫码枪扫描二维码生成的demo,并用打印机打印出来. 需求: 1. 使用扫码枪扫描二维码,获取内容 2. 把内容转成二维码显示到页面 3. 打印这个二维码使用扫码枪扫描二 ...
Google Chrome 关闭网页生成二维码快捷方式
最近Google浏览器最新版本或者 (88.0.4324.146)版本以上,增加了网页中右键生成二维码的快捷方式,不是很常用,但老是会不小心点到,如何关闭呢. 1.打开谷歌浏览器 2.在地址栏中,填入 ...
vue 网页生成二维码，微信扫一扫在手机打开页面
npm i qrcodejs2 import QRCode from 'qrcodejs2' <template><div id="qrcode" ref=&qu ...

网页生成二维码并实现打印的两种方式

来源：由于公司产品功能需要，要在客户回执上增加打印二维码，而用户使用的电脑甚至还有IE8的浏览器，根据工作的总结，记录下使用的两种二维码实现方式的方案，供以后参考。

以上两种二维码打印的实现方案，仅是个人在工作中遇到的案例，仅供参考。如有错误，请留言指正。

网页生成二维码并实现打印的两种方式相关推荐

最新文章

热门文章