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

来源：由于公司产品功能需要，要在客户回执上增加打印二维码，而用户使用的电脑甚至还有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方式，默认是canvas
text: '二维码里面的内容',
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 block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.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>

至此，方案二实现完成。

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