I have a barcode and want to display it multiple times to print it out.
When I do add the tag svg from javascript, after generating barcode they don't show up.
$scope.generatePrintBarcodePage = function (sampleCode, number) {
$scope.barCodePrint = [];
var i;
for (i = 1; i <= number; i++) {
JsBarcode("#barcode" + i, sampleCode, {
height: 40,
displayValue: true
});
}
}
$scope.showBarcode = function (sampleCode, number) {
for (i = 1; i <= number; i++) {
const node = document.createElement("svg");
node.setAttribute("id", "barcode" + i);
document.getElementById("printPageBarcode").appendChild(node);
JsBarcode("#barcode" + i, sampleCode.SampleCode, {
}
}
Then no barcode is displayed.
But if I pre-create the tag svg on the html file, they are displayed, but if I create it, I have no control over how many barcodes I want to print.
<div id="printPageBarcode" style=" height: 500px;">
<svg id="barcode1"></svg> <br />
<svg id="barcode2"></svg> <br />
<svg id="barcode3"></svg> <br />
<svg id="barcode4"></svg> <br />
<svg id="barcode5"></svg> <br />
</div>
How can I add the same barcode multiple time?
SVG elements cannot be dynamically created using createElement in the same way as HTML elements. If you wish to generate a svg, use the createElementNS function.
function showBarcode (sampleCode, number) {
for (let i = 1; i <= number; i++) {
let node = document.createElementNS("http://www.w3.org/2000/svg", "svg");
node.setAttribute("id", "barcode" + i);
document.getElementById("printPageBarcode").appendChild(node);
JsBarcode("#barcode" + i, sampleCode, {
height: 40,
displayValue: true
});
}
}
showBarcode("test", 5);<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<div id="printPageBarcode">
</div>