要做到这种效果,打印界面和使用code128自动生成条形码


首先在html页面中引入打印和条形码的js
<script src="jquery.PrintArea.js"></script>
<script src="jquery-barcode.js"></script>
在js中写弹出打印界面和生成条形码的代码
onPrint() {
var self = this;
var count = false;
$(".barcode").each(function() {
$(this).barcode(this.id, "code128", {
barWidth: 2,
barHeight: 40,
fontSize: 8
});
count = true;
});
$("div#printArea").attr("style", "display:block");
$("div#printArea").printArea();
$("div#printArea").attr("style", "display:none");
}
我这里使用element循环生成条形码,所以在html中写的是
<template v-for="(material,index) in materials">
<tr>
<td colspan="1" align="center">{{code}}</td>
<td colspan="1" align="center">{{name}}</td>
<td colspan="1" align="center">
<div style="float: right;">
<div class="barcode" :id="code"></div>
</div>
</td>
</tr>
</template>
本文介绍如何通过HTML页面结合特定JS库实现条形码自动生成及打印功能。使用code128标准创建条形码,并借助jQuery插件完成打印区域的定制与显示。





