HTML通过DIV+SPAN显示条形码

最新推荐文章于 2024-08-27 09:00:00 发布

原创最新推荐文章于 2024-08-27 09:00:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#条形码 #html #barcode #CSS

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

首先需要在后台通过数值产生对应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>

最终效果：