JQuery — Как создать несколько изображений штрих-кода для области печати на странице Переполнение стека

Question

JQuery — Как создать несколько изображений штрих-кода для области печати на странице Переполнение стека

Я работаю над небольшим веб-приложением менеджера инвентаризации с использованием PHP, jquery, mysql …. Я хочу добавить в приложение функцию штрих-кода

Пожалуйста, я получил этот код для использования здесь после нескольких поисков; большой палец к постеру.
Но я застрял здесь

Я хочу сгенерировать несколько изображений штрих-кода в области для печати, выбрав элемент / элементы с 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>

-1

barcode jquery mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Во-первых, чтобы использовать этот шрифт, вы должны загрузить его на свой веб-сервер вместе со страницей, которую вы используете. Этот пример будет делать то, что вы описали с 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);
});
});

2