如何在页面PHP中的可打印区域生成多个条形码图像答案

【问题标题】：How to generate multiple barcode image to a printable area in a page PHP如何在页面PHP中的可打印区域生成多个条形码图像
【发布时间】：2015-12-30 21:24:00
【问题描述】：

我正在使用 PHP、jquery、mysql 开发一个小型库存管理器 Web 应用程序......我想在应用程序中添加条形码功能

经过几次搜索后，我得到了这个代码，可以在这里使用；对海报竖起大拇指。但我被困在这里：

我想通过从同一页面上的数据表中选择带有 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>

【问题讨论】：

欢迎来到 Stack Overflow。所以这适用于 1，你想如何呈现很多？您能否提供更多关于您尝试过的代码或者您希望看到的示例？
不幸的是，这也行不通。我在stackoverflow的帖子中得到了代码here。它看起来很像某种有效的代码，但出于某种原因我知道......我无法让它工作。我遇到的问题很简单：我想从选择/输入值生成条形码；我正在考虑使用条形码字体，因为我认为使用它来生成多个条形码可能更容易；我将发布一个有效但只能生成一个输出的文件.....感谢您的出席，但是，我真的需要解决这个我的小但耗时的问题。
有很多方法可以做到这一点@BabatundeMisbah - 你看过barcode-coder.com/en/barcode-jquery-plugin-201.html 吗？

标签： php jquery mysql barcode

【解决方案1】：

首先，要使用此字体，您需要将其与您正在使用的页面一起上传到您的网络服务器。该示例将执行您使用 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);
    });
});

【讨论】：

很好的演示:)
@twisty 你是救生员！这几乎让我发疯了......确切的解决方案一直在寻找......我非常感谢你。非常感谢。效果很好。
@twisty 你能帮助代码一次清除所有生成的“结果”，例如类似按钮中的清除函数。在打印生成的完整列表后说，然后清除并开始生成其他列表。感谢期待
简单，只需将 HTML 设置为 null。像这样：$("#clear").click(function(){ $("#results").html(""); });