如何将多个条形码图像生成到页面中的可打印区域 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);
    });
});