借助JsBarcode生成条形码
官网：https://lindell.me/JsBarcode/
github: https://github.com/lindell/JsBarcode
html
<div class="table-div" style="display: block;width: 300px; height: 241px; margin: auto;">
<table border="1" cellspacing="0" cellpadding="3" style=" width: 300px; height: 230px;">
<tr>
<td colspan="2" height="80px">
<div style="text-align: center">
<img id="barcode"/>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px">开发员：${logistics_id}</span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px">SQE工程师：${logistics_id}</span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px"> 取样类型：${logistics_id} </span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px"> 收货地址：${work_address} </span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px">建资料流水号：${logistics_id}</span>
</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/jsbarcode@latest/dist/JsBarcode.all.min.js"></script>
<script>
JsBarcode("#barcode", "212313");
let test = document.getElementById('barcode').getAttribute('src')
console.log(test)
</script>打印代码,使用 window.print() 打印页面上局部的数据
html
<script>
function print_labels(developer, sqe_person, sampling_type_display, work_address, pid) {
layui.use(['form', 'layer', 'laydate', 'table', 'laytpl', 'element'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.jquery,
laydate = layui.laydate,
laytpl = layui.laytpl,
element = layui.element,
table = layui.table,
formSelects = layui.formSelects;
let logistics_id = $('input[name="logistics_id"]').val()
if(!logistics_id){
layer.msg("请先填写物流单号！");
}else{
JsBarcode("#barcode", logistics_id);
let barcode_res = $('#barcode').attr('src')
console.log(barcode_res)
var headstr = "<html><head></head><body>";
var footstr = "</body>";
//获得 print_div 里的所有 html 数据(把要打印的数据嵌套在 一个 div 里，获得 div)
//var printData = document.getElementById("print").innerHTML;
var printData = `
<div class="table-div" style="display: block;width: 300px; height: 241px; margin: auto;">
<table border="1" cellspacing="0" cellpadding="3" style=" width: 300px; height: 230px;">
<tr>
<td colspan="2" height="80px">
<div style="text-align: center">
<img id="barcode" src="${barcode_res}"/>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px">开发员：${developer}</span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px">SQE工程师：${sqe_person}</span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px"> 取样类型：${sampling_type_display} </span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px"> 收货地址：${work_address} </span>
</td>
</tr>
<tr>
<td colspan="2" height="25px">
<span style="float: left;position: relative;left:3px;font-size: 16px">建资料流水号：${pid}</span>
</td>
</tr>
</table>
</div>
`
//获取当前页面的html
var oldstr = document.body.innerHTML;
//把 headstr+printData+footstr 里的数据 复制给 body 的 html 数据 ，相当于重置了 整个页面的 内容
document.body.innerHTML = headstr + printData + footstr;
//使用方法为 window.print() 打印页面上局部的数据
window.print();
document.body.innerHTML = oldstr;
setTimeout("parent.layer.closeAll(\"iframe\")", 1000);
// parent.layer.closeAll("iframe");
}
});
}
</script>