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

来源:由于公司产品功能需要,要在客户回执上增加打印二维码,而用户使用的电脑甚至还有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("")
    }
script>

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

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

  • 方案二:后台生成二维码图片传到页面显示并实现打印。
需要在maven引入两个jar包

<dependency>
    <groupId>com.google.zxinggroupId>
    <artifactId>coreartifactId>
    <version>2.2version>
dependency>
<dependency>
    <groupId>com.google.zxinggroupId>
    <artifactId>javaseartifactId>
    <version>2.2version>
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:(这里用一句话描述这个方法的作用). 
* @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>

至此,方案二实现完成。

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

你可能感兴趣的:(工作需求解决方案)