html 条形码加打印机打印

最新推荐文章于 2025-06-10 09:36:34 发布

赵架构师

最新推荐文章于 2025-06-10 09:36:34 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签：打印条形码 html 二维码打印

本文链接：https://blog.youkuaiyun.com/weixin_42117760/article/details/86588993

本文介绍如何使用JsBarcode插件生成条形码，包括设置格式、显示值、字体大小及高度等参数，同时提供了jQuery和原生JS的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js生成条形码插件</title>
<script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="jQuery.print.js"></script>

<style>
* {margin: 0;padding: 0;box-sizing: border-box;}
h3 {text-align: center;font-size: 16px;margin: 10px;}
.box {text-align: center;}
#barcode {width: 200px;}
</style>
</head>

<body>
<h3>条形码</h3>
<div class="box WordSection1" style='width:750px;margin:0 auto;text-align:center;vertical-align: middle;'>
<img id="barcode" />
</div>
<button id='button_print' name='button_print' onclick="javascript:printit()">打印</button>
<div id='ganburenmianbaio' class='WordSection1' style='width:750px;margin:0 auto;text-align:center;vertical-align: middle;'>
   nihao
</div>
</body>
<script>
var barcode = document.getElementById('barcode'),
str = "16620902551",
options = {
format: "CODE128",
displayValue: true,
fontSize: 18,
height: 100
};
JsBarcode(barcode, str, options); //原生
// $('#barcode').JsBarcode(string, options); //jQuery

function printit(){
$(".box").print({iframe:true,prepend:'<br/>'});
console.log(1);
       }
</script>

</html>