0

我在“Twitter Bootstrap：打印模式窗口的内容”问题上关注了答案，但我还没有能够打印任何东西。我正在使用 PHP 循环并在我的 Carousel 中显示多个图像，并且可以在 Modal 中正确显示单击的图像，但是当单击 Modal 上的 Print 按钮时，没有任何反应，并且我没有收到错误消息。

我的模态代码：

<?php
$launch_cnt = 0;
// Get images again for building modals
$media2 = Media::find_by_sql($sql);
foreach($media2 as $media2): 
    $launch_cnt++;
    $launch = "launch" . $launch_cnt;
        ?> 
        <section id=<?php echo $launch; ?> class="modal hide fade">
          <header class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </header>

          <div id="printThis">
            <div class="modal-body">
              <img src="../<?php echo $media2->image_path(); ?>"  />
            </div>
          </div>

          <footer class="modal-footer">
            <button id="btnPrint">Print</button>
            <button class="btn btn-primary" data-dismiss="modal">Close</button>
          </footer>
        </section>
    <?php  
    endforeach;
?>

我已经按照http://jsfiddle.net/95ezN/3/答案中指出的说明实现了 JS 代码和 CSS 代码

我做了一些测试，似乎问题出在我的 Javascript 中。如果我使用此代码（位于结束标记之前）：

<script>
alert("Hello World!");

document.getElementById("btnPrint").onclick = function() {
  printElement(document.getElementById("printThis"));
  window.print();
}
</script>

然后是“Hello World！”的警报弹出窗口。显示，这基本上告诉我我到了那里。但是，如果我包含名为 printElement 的所需函数，则不会显示警报弹出窗口，因此根本不会执行 JS。完整的带有函数的JS是：

<script>
alert("Hello World!");

document.getElementById("btnPrint").onclick = function() {
  printElement(document.getElementById("printThis"));
  window.print();
}

function printElement(elem) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    $printSection.appendChild(domClone);
}  ​
</script>
4

1 回答 1

0

负责显示打印对话框的部分是：

document.getElementById("btnPrint").onclick = function() {
    window.print();
}

您还可以将 html 更改为：

 <button id="btnPrint" onclick="window.print()">Print</button>
于 2013-05-23T18:30:31.920 回答