HTML通过DIV+SPAN显示条形码

最新推荐文章于 2025-04-18 11:19:01 发布

闸北米

最新推荐文章于 2025-04-18 11:19:01 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签：条形码 html barcode CSS

本文链接：https://blog.youkuaiyun.com/wc79866/article/details/37923997

该博客讲述了如何在HTML中通过DIV和SPAN元素来创建条形码，以达到更好的显示效果。作者最初尝试使用Table和td标签，但扫描效果不理想。改用DIV+SPAN后，条形码的显示更加接近真实效果。

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

首先需要在后台通过数值产生对应0101

zf = zf.replaceAll("0", "_|_|__||_||_|");
zf = zf.replaceAll("1", "_||_|__|_|_||");
zf = zf.replaceAll("2", "_|_||__|_|_||");

再通过0101转化为Html黑白色在页面上显示：

<span style="font-size:14px;">htmlCode.replaceAll("_", "<td style='height:" + String.valueOf(height) + ";width:" + String.valueOf(width) + ";background:#FFFFFF'></td>");</span>

最后将值输出到页面即可

一开始尝试通过<Table>+<td>标签来实现显示

<table cellspacing="0">
<tr>
	<td style="height:20px;width:1px;background:#FFFFFF"></td>
	<td style="height:20px;width:1px;background:#000000"></td>
	<td style="height:20px;width:1px;background:#FFFFFF"></td>
	<td style="height:20px;width:1px;background:#000000"></td>
</tr>
</table>

显示结果：

虽然Barcode枪可以扫描出来，但是显示效果还是不尽人意

最后改为用DIV+SPAN实现：

<div style="letter-spacing: -0.5em;">
	<span style="background: rgb(0, 0, 0); width: 1px; height: 20px; display:inline-block;padding-left:0px;padding-right:0px;"></span>
	<span style="background: rgb(0, 0, 0); width: 1px; height: 20px; display:inline-block;padding-left:0px;padding-right:0px;"></span>	
	<span style="background: rgb(255, 255, 255); width: 1px; height: 20px; display:inline-block;padding-left:0px;padding-right:0px;"></span>
	<span style="background: rgb(0, 0, 0); width: 1px; height: 20px; display:inline-block;padding-left:0px;padding-right:0px;"></span>
	<span style="background: rgb(255, 255, 255); width: 1px; height: 20px; display:inline-block;padding-left:0px;padding-right:0px;"></span>

最终效果：