如何将多个条形码图像生成到页面中的可打印区域 PHP
How to generate multiple barcode image to a printable area in a page PHP
我正在使用 PHP、jquery、mysql 开发一个小型库存管理器 Web 应用程序。...我想向该应用程序添加条形码功能
经过几次搜索,我得到了这个代码可以在这里使用;对海报竖起大拇指。
但我被困在这里:
我想通过从同一页的数据表中选择 item/items 和 productcode/productid 来生成多个条码图像到可打印区域,然后使用添加按钮将其添加到可打印区域一个接着一个?
<style>
@font-face {
font-family: barcode;
src: url(free3of9.ttf);
}
</style>
<body> ABC
<div style='font-family:barcode;font-size:32px;'>
123456789 </div> DEF</body>
</html>
首先,要使用此字体,您需要将其与您正在使用的页面一起上传到您的网络服务器。这个例子将执行您用 JQuery 描述的操作,但条形码不会是样式,因为 jsfiddle 不托管字体。
http://jsfiddle.net/Twisty/72ewdoj4/
HTML
<ul class="form">
<li>
<label>Top Text:</label>
<input type="text" id="top" />
</li>
<li>
<label>Barcode:</label>
<input type="text" id="bar" />
</li>
<li>
<label>Bottom Text:</label>
<input type="text" id="bottom" />
</li>
<li>
<button id="add">Add</button>
</ul>
<hr />
<table id="results">
<tr>
<td> <span class="label">ABC</span>
<span class="bar label">123456789</span>
<span class="label">DEF</span>
</td>
</tr>
</table>
CSS
@font-face {
font-family: barcode;
src: url(3OF9_NEW.TTF);
}
.label {
display: block;
}
.bar {
font-family:barcode;
font-size:32px;
}
#results {
width: 100%;
}
#results td {
padding: 10px 0;
text-align: center;
}
ul.form {
margin: 0;
padding: 0;
}
ul.form li {
margin: 0;
list-style: none;
}
ul.form li label {
display: inline-block;
width: 120px;
}
JQuery
$(document).ready(function () {
$("#add").click(function () {
var newLabel = "<tr><td>"
newLabel += "<span class='label'>" + $("#top").val() + "</span>";
newLabel += "<span class='bar label'>" + $("#bar").val() + "</span>";
newLabel += "<span class='label'>" + $("#bottom").val() + "</span>";
newLabel += "</td></td>";
$("#results").append(newLabel);
});
});
我正在使用 PHP、jquery、mysql 开发一个小型库存管理器 Web 应用程序。...我想向该应用程序添加条形码功能
经过几次搜索,我得到了这个代码可以在这里使用;对海报竖起大拇指。 但我被困在这里:
我想通过从同一页的数据表中选择 item/items 和 productcode/productid 来生成多个条码图像到可打印区域,然后使用添加按钮将其添加到可打印区域一个接着一个?
<style>
@font-face {
font-family: barcode;
src: url(free3of9.ttf);
}
</style>
<body> ABC
<div style='font-family:barcode;font-size:32px;'>
123456789 </div> DEF</body>
</html>
首先,要使用此字体,您需要将其与您正在使用的页面一起上传到您的网络服务器。这个例子将执行您用 JQuery 描述的操作,但条形码不会是样式,因为 jsfiddle 不托管字体。
http://jsfiddle.net/Twisty/72ewdoj4/
HTML
<ul class="form">
<li>
<label>Top Text:</label>
<input type="text" id="top" />
</li>
<li>
<label>Barcode:</label>
<input type="text" id="bar" />
</li>
<li>
<label>Bottom Text:</label>
<input type="text" id="bottom" />
</li>
<li>
<button id="add">Add</button>
</ul>
<hr />
<table id="results">
<tr>
<td> <span class="label">ABC</span>
<span class="bar label">123456789</span>
<span class="label">DEF</span>
</td>
</tr>
</table>
CSS
@font-face {
font-family: barcode;
src: url(3OF9_NEW.TTF);
}
.label {
display: block;
}
.bar {
font-family:barcode;
font-size:32px;
}
#results {
width: 100%;
}
#results td {
padding: 10px 0;
text-align: center;
}
ul.form {
margin: 0;
padding: 0;
}
ul.form li {
margin: 0;
list-style: none;
}
ul.form li label {
display: inline-block;
width: 120px;
}
JQuery
$(document).ready(function () {
$("#add").click(function () {
var newLabel = "<tr><td>"
newLabel += "<span class='label'>" + $("#top").val() + "</span>";
newLabel += "<span class='bar label'>" + $("#bar").val() + "</span>";
newLabel += "<span class='label'>" + $("#bottom").val() + "</span>";
newLabel += "</td></td>";
$("#results").append(newLabel);
});
});