<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jQuery.print/1.6.2/jQuery.print.min.js"></script>
<div id="print_content">
<img id="barcode"></img>
<br>姓名: 张三<br>身份证: 44044019990217444X<br>
</div>
<button id="print">打印</button>
<script>
$('#print').click(function(){
JsBarcode("#barcode", '44044019990217444X|' + encodeURIComponent('张三'), {
format: "CODE128",//选择要使用的条形码类型
width: 3, //设置条之间的宽度
height: 100, // 高度
displayValue: true, // 是否在条形码下方显示文字
text: "wstong", // 覆盖显示的文本
fontOptions: "bold italic", // 使文字加粗体或变斜体
font: "fantasy", // 设置文本的字体
textAlign: "right", // 设置文本的水平对齐方式
textPosition: "top", // 设置文本的垂直位置
textMargin: 5, // 设置条形码和文本之间的间距
fontSize: 15, // 设置文本的大小
background: "#a5cfd5", // 设置条形码的背景
lineColor: "#000000",//设置条和文本的颜色。
margin: 15 // 设置条形码周围的空白边距
});
$('#print_content').print();
// 界面不生成条形码打印
// const img = document.createElement('img');
// img.innerHTML = '';
// img.id = 'wstong_barcode'
// document.body.appendChild(img);
// JsBarcode("#wstong_barcode", '44044019990217444X|' + encodeURIComponent('张三'), {
// format: "CODE128",//选择要使用的条形码类型
// width: 3, //设置条之间的宽度
// height: 100, // 高度
// displayValue: true, // 是否在条形码下方显示文字
// text: "wstong", // 覆盖显示的文本
// fontOptions: "bold italic", // 使文字加粗体或变斜体
// font: "fantasy", // 设置文本的字体
// textAlign: "right", // 设置文本的水平对齐方式
// textPosition: "top", // 设置文本的垂直位置
// textMargin: 5, // 设置条形码和文本之间的间距
// fontSize: 15, // 设置文本的大小
// background: "#a5cfd5", // 设置条形码的背景
// lineColor: "#000000",//设置条和文本的颜色。
// margin: 15 // 设置条形码周围的空白边距
// });
// var barcSrc = $("img[id='wstong_barcode']")[0]['src']
// $("img[id='wstong_barcode']").remove();
// var tmp = '<div><img id="barcode_img" src="'+barcSrc+'"><br>姓名: 张三<br>身份证: 44044019990217444X<br></div>'
// $(tmp).print();
})
</script>
</html>
