Question

我正在努力排列我的QR码以便打印，我有一个QR码列表，想要检查并选择“打印”，我快到了。但是当我卡住迭代法时。。单击“打印”时，默认情况下仅打印Array [0]。我想在弹出的“打印”窗口上打印所有选定的项目。这是我的代码：大家好，我正在努力排列我的QR码以便打印，我有一个QR码列表，想查看并选择“打印”，我快到了。但是在“迭代遍历”时遇到了问题。单击“打印”时，默认情况下仅打印Array [0]。我想在弹出的“打印”窗口上打印所有选定的项目。这是我的代码：

<script type="text/javascript">
  function PrintQR() {
    var codes = document.getElementsByClassName("QR")[0].innerHTML
    for (var i = 0; i < codes.length; i++) {
      var popupWin = window.open('', 'blank');
      popupWin.document.open();
      popupWin.document.write('' + '<html>' + '<body onload="window.print()">' + '<div class="Q">' + codes + '</div>' + '</body>' + '</html>');
      popupWin.document.close();
      setTimeout(function() {
        popupWin.close();
      }, 10);
    }
  };
</script>
//MY Submit Button Here :
<div>
  <center><button type="button" class="btn btn-primary btn-sm" onclick="PrintQR()"> Print This </button></center>
</div>
Here is my FORM:
<form method="POST">
  <?php
if (isset($_POST['submit'])) {
    if (!empty($_POST['qrcode'])) {
        // Counting number of checked checkboxes.
        $checked_count = count($_POST['qrcode']);
        echo "You have selected following " . $checked_count . " option(s): <br/>";
        // Loop to store and display values of individual checked checkbox.
        foreach ($_POST['qrcode'] as $selected) {
            $output = '
    <br><br><br>
    <div class="QR">
    <center><img src="userQr/' . $selected . '" /> </center>
    </div>
    ';
            echo $output;
        }
    }
}
?>
</form>

这只是打印First Array，有时在我尝试时会给我一个“ HTML Collection” Javascript错误！任何帮助将不胜感激。谢谢大家在Stackoverflow上的聪明工作。埃德-

Answer 1

您在此处明确选择了第一个元素：

var codes = document.getElementsByClassName("QR")[0].innerHTML

您应该选择所有元素以及它们上的循环。这是一个示例：

function PrintQR() {
  var codes = document.querySelectorAll('.QR');

  codes = [...codes].map(code => code.innerHTML);

  console.log(codes.join('\n'));
  // Uncomment the following on your real page

  /*
  var popupWin = window.open('', 'blank');
  popupWin.document.open();
  popupWin.document.write('' + '<html>' + '<body onload="window.print()">' + '<div class="Q">' + code + '</div>' + '</body>' + '</html>');
  popupWin.document.close();
  setTimeout(function() {
    popupWin.close();
  }, 10);
  */
};

<div>
  <center><button type="button" class="btn btn-primary btn-sm" onclick="PrintQR()"> Print This </button></center>
</div>
<form method="POST">
  You have selected following 3 option(s): <br />
  <br><br><br>
  <div class="QR">
    <center><img src="userQr/1" /> </center>
  </div>
  <br><br><br>
  <div class="QR">
    <center><img src="userQr/2" /> </center>
  </div>
  <br><br><br>
  <div class="QR">
    <center><img src="userQr/3" /> </center>
  </div>
</form>

更新
由于您要一次打印所有图像，因此不需要循环遍历它们。上面的代码段已更新，以显示没有循环的示例。您可能需要一些CSS样式，才能将图像分别打印在不同的页面上。

Answer 2

谢谢您，先生，但是现在它只打印最后一个，而打印是指打印到打印机，将显示一个弹出窗口，唯一显示的QR码是数组中的最后一个... 我真的希望他们在打印之前在弹出的“打印预览”窗口中显示所有内容，是的，我选择了“全部页面”。非常感谢。！埃德-

我无法打印所有选中的复选框！（数组）

2 个答案:

我无法打印所有选中的复选框！ （数组）

2 个答案:

我无法打印所有选中的复选框！（数组）