基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理 - 伍华聪 - 博客园
随笔 - 500, 文章 - 20, 评论 - 7295, 引用 - 20
在很多项目里面，对条形码和二维码的生成和打印也是一种很常见的操作，在Web项目里面，我们可以利用JS生成条形码和二维码的组件有很多。本文引入两个比较广泛使用的JS组件，用来处理条形码和二维码的生成处理，并介绍如何利用CLODOP组件实现内容的打印输出。生成条形码使用组件JsBarcode，生成二维码使用组件qrcodejs。
1、条形码的生成
条码的作用一般在一些商品标签上，方便使用条码枪快速、准确录入信息。如下所示是一种条形码
这里条形码生成使用了JsBarcode组件进行处理，它支持很多格式的条码格式，如下所示。
它的简单代码例子如下所示。
//HTML代码
&svg id="barcode"&&/svg&
&!-- or --&
&canvas id="canvas"&&/canvas&
&!-- or --&
&img id="barcode"/&
JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");
生成的图片格式如下所示。
JsBarcode组件支持多种选项参数的设置，如下所示的代码
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
height:40,
displayValue: false
JsBarcode("#barcode")
.options({font: "OCR-B"}) // Will affect all barcodes
.EAN13("8", {fontSize: 18, textMargin: 0})
.blank(20) // Create space between the barcodes
.EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
.render();
通过该组件的案例代码介绍，我们可以了解到生成常规二维码的使用方式。例如我们在界面上添加了以下HTML代码。
&div class="row" id="barDiv1"&
&div class="col-md-4 col-sm-4 col-xs-4"&
条形码(770 145 896 701)：&br /&
&img alt="" id="barcode1" /&
&div class="col-md-4 col-sm-4 col-xs-4"&
条形码(770 145 896 702)：&br /&
&img alt="" id="barcode2" /&
&div class="col-md-4 col-sm-4 col-xs-4"&
条形码(770 145 896 703)：&br /&
&img alt="" id="barcode3" /&
然后通过JS代码实现二维码的生成。
//使用JsBarcode生成条形码
for (var i = 1; i & 10; i++) {
var barcodeValue = "" +//前缀 + 数值
JsBarcode("#barcode" + i, barcodeValue, {
format: "CODE128",
displayValue: true,
fontSize: 24,
lineColor: "#0cc"
最后我们可以看到具体的生成效果如下所示。
从这里我们可以看到，使用JS实现条形码的生成是非常方便简洁的，同事速度也是很不错的。
2、二维码的生成
二维码实现可以通过使用组件qrcodejs进行生成，二维码也可以使用组件jquery-qrcode进行生成，也相对比较简洁，不过打印二维码文档的时候，jquery-qrcode没有显示二维码图片，而组件qrcodejs则工作正常，因此推荐使用组件qrcodejs。这个qrcodejs组件使用方式也很简单，基础使用代码如下所示。
&div id="qrcode"&&/div&
&script type="text/javascript"&
new QRCode(document.getElementById("qrcode"), "http://jindo./collie");
复杂一点的使用JS代码如下所示。
&div id="qrcode"&&/div&
&script type="text/javascript"&
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "http://jindo./collie",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
通过了解该组件的使用，我们可以在项目中增加一个实际的代码进行测试，如下所示。
&table border='0' width='100%'&
设备二维码(9001)：&br /&
&div id="imgDevice9001"&&/div&
设备二维码(9002)：&br /&
&div id="imgDevice9002"&&/div&
设备二维码(9003)：&br /&
&div id="imgDevice9003"&&/div&
&tr style="height:20px"&&td colspan="3"&&/td&&/tr&
具体我们可以利用JS动态生成相关的二维码。
//设备图片二维码
for (var i = 9001; i & 9010; i++) {
var url = "/H5/device?devicecode=" +
//使用jquery.qrcode的做法
//$("#imgDevice" + i).qrcode({ width: 100, height: 100, text: url });
//$("#imgDevice" + i).css("height", "100px");
//使用qrcodejs的做法
var qrcode = new QRCode(document.getElementById("imgDevice" + i), {
text: url,
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
最后界面生成的二维码如下所示。
3、条形码和二维码的打印处理
介绍我二维码和条形码的生成，关于它们的打印，可以利用我介绍过的CLODOP进行打印处理，需要了解可以参考下随笔《》我们在这里介绍的打印，也是基于这个控件的打印处理的。当然，如果打印，也是可以利用PrintThis这个组件进行处理的（详细可以参考随笔《》），不过总体效果没有上面的CLODOP的打印效果佳。打印JS代码如下所示，可以采用下面两个函数的其中之一进行处理。
//使用表格格式化输出
function PrintBarcodeWithTable() {
LODOP = getLodop();
LODOP.PRINT_INIT("条码_格式化输出");
var strHTML = "&table border='0' width='100%' &";
strHTML = strHTML + "&tr&&td&";
strHTML = strHTML + $("#barDiv1").html();
strHTML = strHTML + "&/td&&/tr&";
strHTML = strHTML + "&tr&&td&";
strHTML = strHTML + $("#barDiv2").html();
strHTML = strHTML + "&/td&&/tr&";
strHTML = strHTML + "&tr&&td&";
strHTML = strHTML + $("#barDiv3").html();
strHTML = strHTML + "&/td&&/tr&";
LODOP.ADD_PRINT_TABLE(88, 200, 700, 900, strHTML);
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
//使用分页输出
function PrintBarcodeWithPaging() {
LODOP = getLodop();
LODOP.PRINT_INIT("条码_分页输出");
LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv1").html());
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv2").html());
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv3").html());
LODOP.NewPage();
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
条码的打印效果如下所示。
而打印二维码的JS代码如下所示。
//打印二维码
function PrintQrcode2() {
CreatePrintData($("#qrcode").html());
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
//打印数据构建
function CreatePrintData(html) {
LODOP = getLodop();
LODOP.PRINT_INIT("");
//var strBodyStyle = "&link type='text/css' rel='stylesheet' href='/Content/Themes/Default/style.css' /&";
var strBodyStyle = "&style&&!--table { border:1;background-color: #CBCBCC } td {border: 1; }";
strBodyStyle += " th { background-color:#F1F1F3;padding-left:5border:1}--&&/style&";
var strFormHtml = strBodyStyle + "&body&" + html + "&/body&";
LODOP.ADD_PRINT_HTM(20, 40, 710, 900, strFormHtml);
LODOP.PREVIEW();
得到的二维码打印效果如下所示。
最终完成了这个关于条形码、二维码的动态生成，以及图形打印的相关操作了。整个模块的界面如下所示。
关于条形码、二维码的处理，我们这里引入的条形码组件JsBarcode和二维码组件qrcodejs是非常不错的开源JS组件，满足了我们大多数的要求，而且使用方便、简洁，希望这些内容能够给你的项目提供灵感及用处。深圳二维码打印机|打印二维码|条码打印机
深圳二维码打印机|打印二维码|条码打印机
收藏此公司
樊小姐&女士
电话：86-0
传真：86-5
您现在的位置：
& 供应信息& 深圳二维码打印机|打印二维码|条码打印机
添加为商业伙伴
发布日期：
深圳二维码打印机|打印二维码|条码打印机 详细说明
深圳市晶思敏科技有限公司联系人：艾小姐电话：0
QQ：深圳市罗湖区宝安北路国际商品交易大厦六楼A05#######################################名
称 条码打印机品
号 TTP－342 Pro资料来源
列印模式 热转式/热敏式解析度（分辩率） 300dpi(12dots/mm)列印速度 每秒2(50.8mm)列印宽度 25mm(1″)～104mm(4.09)列印长度 6mm(0.24″)～460mm(18.11)记忆体 2MB Flash ROM,2MB DRAM感测器 穿透式/反射式自动剥离功能 无操作面板 LED指示灯(电源,错误,待机),按键(暂停,出纸,)尺寸 232mm W×288mm D×156mm H(9.1″W×11.3″D×6.2″H)净毛重 净重=4.8kg,毛重=6kg指令集 TSPL2通讯介面 RS232,Centronics parallel Ports或USB1.1软体 BarTender
UltraLite ，Windows DLL纸张厚度 0.06L～0.25L(0.002″～0.01″)纸张类型 纸卷式，标签式（连续纸，间距纸，折叠纸，票券，吊牌…等）张宽度 25.4L～114L(1″～4.49″)最大纸卷尺寸 内部纸架：110L（4.3″）外径搭配25L（1″）纸芯 外部纸架：214L (8.4″)
外径搭配76L（3″）纸芯碳带轴心尺寸 25.4L（1″）-76.2 mm ( 3″)碳带宽度 25.4L～114L（1″～4.4″）最大碳带长度 300m"一维条码" "Code 39,Code 39C ,Code 128UCC,Code 128subsets A.B.C.,Code 11,Codebar,interleaved 2 of 5,EAN-13,EAN-128, UPC-A,PUC-E, EAN and UPC 2(5)dights add-on ,CPOST, MSI, PLESSEY, POSTNET"二维条码 PDF-417,Maxicode,DataMatrix内部字型 5种内建字型，Windows字型可透过软体下载使用）图形种类 支持pcx,bmp,jpg等图形档案格式，图形可透过软体自由放大、缩小、旋转单机操作键盘 KU-007 Plus 可程式化，中文显示键盘自动切刀 无国际字型 繁体中文，简体中文，日文汉字，韩文字型卡本产品网址：/trss/3025615.html产品名称：深圳二维码打印机|打印二维码|条码打印机
樊小姐&女士&业务员
广东省深圳市罗湖区宝安北路国际商品交易大厦六楼A05
重要提示：
网上信息有风险，实际交易过程中请务必保持警惕，并仔细核实相关有效证件！如与网页上的物流公司合作，请务必交易前核实相关公司资质，并签订相关合同，标明托运价格、货物明细等，并索取相关收款凭证，防止货运公司随意加价等诈骗行为！请勿随意给陌生人汇款，以免上当受骗！『』
免责声明：
以上信息由网友自行发布，国际贸易网仅展示上述信息，国际贸易网不能确保上述信息的真实性、准确性、完整性，也不承担浏览者的任何商业风险。因此，国际贸易网不承担您因此而发生或致使的任何损害，但我们欢迎您举报与投诉。国际贸易网保留删除上述信息的权利。
本网站版权归所有 Copyright &1113人阅读
在页面上通过“打印”按钮，打印div内容，实现标签的打印（含有条形码和二维码）。
操作步骤：1，加载js，jquery-1.3.2.min.js&&&&&引用jquery。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&jquery-barcode-2.0.1.js&&&&&&&&&&&& 引用条形码
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&jquery.qrcode.min.js&&&&&&&&&&&&&&&& 引用二维码
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&LodopFuncs.js&&&&&&&&&&&&&&&&&&&&&&&&&&& web打印控件&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&2，获取二维码后台实现：
&&&&&&&&&&&&&&&&&&&&&&&&&&EncodeHandle。java&&&&&&&&&&&&&&&&&
import java.awt.image.BufferedI
import java.io.IOE
import java.io.OutputS
import javax.imageio.ImageIO;
import com.mon.BitM
public class EncoderHandler {
private static final int BLACK = 0xFF000000;
private static final int WHITE = 0xFFFFFFFF;
// Empty constructor
private EncoderHandler() {
// Methods
* 获取BufferedImage
* @param matrix:BitMatrix
* @return BufferedImage
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 & x++) {
for (int y = 0; y & y++) {
image.setRGB(x, y, matrix.get(x, y) ? BLACK : WHITE);
* 将二维码输出到流
* @param matrix:BitMatrix
* @param format:图片格式
* @param stream:OutputStream
* @throws IOException
public static void writeToStream(BitMatrix matrix, String format,
OutputStream stream) throws IOException {
BufferedImage image = toBufferedImage(matrix);
if (!ImageIO.write(image, format, stream)) {
throw new IOException(&Could not write an image of format &
+ format);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 调用二维码生成的servlet
import java.io.IOE
import java.util.H
import javax.servlet.ServletE
import javax.servlet.ServletOutputS
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import com.google.zxing.BarcodeF
import com.google.zxing.EncodeHintT
import com.google.zxing.MultiFormatW
import com.google.zxing.WriterE
import com.mon.BitM
* @author uimagine
* 二维码生成Servlet
public class CodeServlet extends HttpServlet {
* Default SerialVersionUID
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String code = request.getParameter(&code&);
String qrcode = request.getParameter(&qrcode&);
int width = 300;
int height = 300;
// 二维码的图片格式
String format = &gif&;
Hashtable&EncodeHintType, Object& hints = new Hashtable&EncodeHintType, Object&();
// 内容所使用编码
hints.put(EncodeHintType.CHARACTER_SET, &utf-8&);
ServletOutputStream stream = response.getOutputStream();
BitMatrix bitMatrix =
if(qrcode!=null){
bitMatrix = new MultiFormatWriter().encode(qrcode, BarcodeFormat.QR_CODE, width, height, hints);
if(code!=null){
width = 505;
height = 50;
bitMatrix = new MultiFormatWriter().encode(code, BarcodeFormat.CODE_128, width, height, null);
EncoderHandler.writeToStream(bitMatrix, format, stream);
} catch (WriterException e) {
e.printStackTrace();
stream.flush();
stream.close();
response.flushBuffer();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& web.xml&&
&&&&&&&&&&&&&&&&&&
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app version=&3.0&
xmlns=&/xml/ns/javaee&
xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
xsi:schemaLocation=&/xml/ns/javaee /xml/ns/javaee/web-app_3_0.xsd&&
&description&This is the description of my J2EE component&/description&
&display-name&This is the display name of my J2EE component&/display-name&
&servlet-name&CodeServlet&/servlet-name&
&servlet-class&.CodeServlet&/servlet-class&
&/servlet&
&servlet-mapping&
&servlet-name&CodeServlet&/servlet-name&
&url-pattern&/CodeServlet.do&/url-pattern&
&/servlet-mapping&
&/web-app&
&&&&&&&&&&&&&&&&&&&&&3，jsp前台页面调用
&&&&&&&&&&&&&&&&&& （1），加载javascript
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&object id=&LODOP_OB& classid=&clsid:E0C--ACA& width=0 height=0&
&embed id=&LODOP_EM& type=&application/x-print-lodop& width=0 height=0
pluginspage=&install_lodop.exe&&&/embed&
&/object& &pre class=&javascript& name=&code&&&script type=&text/javascript&&
function load(){
$(&#bcTarget_tiaoxingma&).barcode({code: &1234567&, crc:false}, &int25&,{barWidth:2, barHeight:20});
//bcTarget5中ie8一下render用table
ie9以上用canvas
两个不同的渲染
var LODOP; //声明为全局变量
function printme_1(){
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
var strFormHtml=&&body style='margin-top: 15margin-left: 15'&&+document.getElementById
('biaoqian').innerHTML+&&/body&&
strFormHtml.replace('&div','&span');
strFormHtml.replace('&/div','&/span');
LODOP.SET_PRINT_PAGESIZE(1,600,400,'');
LODOP.ADD_PRINT_HTM(0,0,600,450,strFormHtml);
LODOP.PREVIEW();
LODOP.print();
}&/script&
&&&&&&&&&&&&&&&&&& （2）创建打印的div
&div id=&biaoqian& style=&width: 200height: 80margin-top: 0 &&
&div id=&bcTarget_erweima& style=&margin-left: 0margin-top: 0width: 50 display: margin-bottom: 0&&&img
style=&height:65width:65px& src=&${pageContext.request.contextPath}/CodeServlet.do?qrcode=zhangsan& /&
&div id=&bcTarget_tiaoxingma& style=&width:150height:40display:margin : 0px 0px 0px 5&&&/div&
&&&&&&&&&&&&&&&&& （3）打印div
&input type=&button& value=&dayin& onclick=&printme_1();& /&
&&&&&&&&&&&&&&&&&&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1121次
排名：千里之外}