<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-barcode-2.0.1.js"></script>
<script type="text/JavaScript" src="js/jquery.PrintArea.js" ></script>
<script>
function myPrint(obj){
var mode="popup";
var popClose=false;
var retainAttr="";
var extraHead="";
var extraCss;
var keepAttr;
var headElements = $("input#addElements").is(":checked") ? '<meta charset="utf-8" />,<meta http-equiv="X-UA-Compatible" content="IE=edge"/>' : '';
// 若要打印多个区域，用逗号隔开
var print="#divTemplate,#div7";
var options = { mode : mode, extraHead : headElements };
$( print ).printArea( options );
}
var value = "G1268907453";
var btype = "code93";//ean8,ean13m,std25,int25,code11,code39,code93,code128,codabar,msi,datamatrix
var renderer = "css"; //css,bmp,svg,canvas
var settings = {
output:renderer,
bgColor: "#ffffff", //背景颜色
color: "gray",//条码颜色
barWidth: 1,//border width
barHeight: 50,
moduleSize: 10,
posX: 10,//类似margin-left
posY: 10,//类似margin-top
addQuietZone: false
};
$(function(){
$("#barcodeTarget").show().barcode(value, btype, settings);
});
function getNewBarcode()
{
var x="裸钻";
var z="5克拉";
var j="FL";
var q="EX";
var zs="GIA967123"
var divInfo=$("#divInfo")[0].innerHTML.replace("@@型号",x+"/R/N").replace("@@重量",z).replace("@@净度",j).replace("@@切工",q).replace("@@证书",zs);
$("#divInfo")[0].innerHTML=divInfo;
var barcodeStr=$("#txtBarCode").val();
if(barcodeStr!="")
{
$("#barcodeTarget").empty();
$("#barcodeTarget").show().barcode(barcodeStr, btype, settings);
}
}
</script>
</head>
<body>
barCode:<input type="text" id="txtBarCode" onkeyup="getNewBarcode();">
<button onclick="myPrint(document.getElementById('div1'))">打 印</button>
<!-- 模版1-->
<div id="divTemplate" class="divTemplate" style="width: 500px; height: 300px; margin: 10%;">
<p style="margin-left: 5%; margin-top: 5%;"><font style="font-size: 50px; color: blue"><strong>A公司</strong></font></p>
<hr style="width: 90%; algin: center; margin-top: -3%">
<div style="width: 90%; height: 150px; margin: 5%; margin-top: 0%; padding: 2%;">
<div id="divInfo" style="width: 35%; height: 130px; margin-top: 0%; padding: 2%; float: left">
型号：@@型号<br />
重量：@@重量<br />
净度：@@净度<br />
切工：@@切工<br />
证书：@@证书<br />
</div>
<div style="width: 220px; height: 130px; margin-left: 2%; margin-top: 0%; padding: 2%; float: left; text-align: center;">
<div id="barcodeTarget" style="margin: 0 auto;"></div>
</div>
</div>
</div>
<div id="div1" class="divTemplate" style="width: 500px; height: 300px; margin: 10%;">
<p style="margin-left: 5%; margin-top: 5%;"><font style="font-size: 50px; color: blue"><strong>B公司</strong></font></p>
<hr style="width: 90%; algin: center; margin-top: -3%">
<div style="width: 90%; height: 150px; margin: 5%; margin-top: 0%; padding: 2%;">
<div id="div2" style="width: 35%; height: 130px; margin-top: 0%; padding: 2%; float: left">
型号：@@型号<br />
重量：@@重量<br />
净度：@@净度<br />
切工：@@切工<br />
证书：@@证书<br />
</div>
<div style="width: 220px; height: 130px; margin-left: 2%; margin-top: 0%; padding: 2%; float: left; text-align: center;">
<div id="Div3" style="margin: 0 auto;"></div>
</div>
</div>
</div>
<div id="div4" class="divTemplate" style="width: 500px; height: 300px; margin: 10%;">
<p style="margin-left: 5%; margin-top: 5%;"><font style="font-size: 50px; color: blue"><strong>C公司</strong></font></p>
<hr style="width: 90%; algin: center; margin-top: -3%">
<div style="width: 90%; height: 150px; margin: 5%; margin-top: 0%; padding: 2%;">
<div id="div5" style="width: 35%; height: 130px; margin-top: 0%; padding: 2%; float: left">
型号：@@型号<br />
重量：@@重量<br />
净度：@@净度<br />
切工：@@切工<br />
证书：@@证书<br />
</div>
<div style="width: 220px; height: 130px; margin-left: 2%; margin-top: 0%; padding: 2%; float: left; text-align: center;">
<div id="Div6" style="margin: 0 auto;"></div>
</div>
</div>
</div>
<div id="div7" class="divTemplate" style="width: 500px; height: 300px; margin: 10%;">
<p style="margin-left: 5%; margin-top: 5%;"><font style="font-size: 50px; color: blue"><strong>D公司</strong></font></p>
<hr style="width: 90%; algin: center; margin-top: -3%">
<div style="width: 90%; height: 150px; margin: 5%; margin-top: 0%; padding: 2%;">
<div id="div8" style="width: 35%; height: 130px; margin-top: 0%; padding: 2%; float: left">
型号：@@型号<br />
重量：@@重量<br />
净度：@@净度<br />
切工：@@切工<br />
证书：@@证书<br />
</div>
<div style="width: 220px; height: 130px; margin-left: 2%; margin-top: 0%; padding: 2%; float: left; text-align: center;">
<div id="Div9" style="margin: 0 auto;"></div>
</div>
</div>
</div>
</body>
</html>
JQUERY 实现条码生成和指定打印内容（预览效果）
5星 · 超过95%的资源 需积分: 50 148 浏览量
2017-11-01
16:22:31
上传
评论
收藏 48KB RAR 举报 
条码生成和指定打印区域.rar （4个子文件） 
打印 
20171031_02 DIV模版.html 6KB js 
jquery.PrintArea.js 9KB jquery.min.js 94KB jquery-barcode-2.0.1.js 54KB资源评论
susongyu2019-12-21挺好用得得
QQ_SK2020-05-19老铁 你是头一个下载后给评论的，多谢支持
