Question

关于在HTML页面内显示多个条形码以进行打印，我遇到了问题。条形码是可以的，html div是可以的，但是当我运行脚本时，我不知道为什么，我设法在下面的for循环中完成它的方式是打印了超出预期的内容，您可以在下面检查：

            if (imprimirQuantidadeTotal == true) {

                for (var i = 0; i < quantidade; i++) {
                    container.appendChild(etiqueta);
                    container.innerHTML += etiqueta;
                }
            }

我暂时删除了一些不重要的变量，但这是整个页面。现在不需要CSS。

 <body>
        <div class="container" style="display: flex; flex-direction:column; flex-wrap:wrap;">
            <div class="etiqueta">
                <svg class="barcode"></svg>
                <div style="display:inline;">
                    <span id="pedido"></span>
                    <span id="item"></span>
                </div>
            </div>
        </div>
        <script src="~/Scripts/JsBarcode.all.min.js"></script>
        <script>
            var quantidade = 3; //receber quantidade na modal
            var imprimirQuantidadeTotal = true; //checkbox?
            var elements = null;
            var etiqueta = document.querySelector(".etiqueta");
            var container = document.querySelector(".container");

            if (pedido != null) {
                document.querySelector('#pedido').textContent = pedido.toUpperCase()
            }
            if (item != null) {
                document.querySelector('#item').textContent = item.toUpperCase()
            }

            if (imprimirQuantidadeTotal == true) {

                for (var i = 0; i < quantidade; i++) {
                    container.appendChild(etiqueta);
                    container.innerHTML += etiqueta;
                }
            }

            document.addEventListener('DOMContentLoaded', function () {
                JsBarcode(".barcode", numero, {
                    format: "CODE128",
                    width: 1,
                    height: 50
                })
            });
        </script>
    </body>

这是输出： Output to print

Answer 1

设置innerHTML属性时，该值应为元素的HTML内容（内部HTML）。尝试如下修改您的代码（由于您已通过innerHtml属性添加了新项目，因此我认为无需使用appendChild（）方法）：

if (Array.prototype.includes == undefined) {
    var core_js_modules_es_array_includes__WEBPACK_IMPORTED_MODULE_166__ = __webpack_require__("../node_modules/core-js/modules/es.typed-array.includes.js");
    ....
}

更多详细信息，请检查this sample。屏幕截图如下：

使用appendchild显示多个div对象时出现问题

1 个答案: