使用 bootstrap 全屏模式时同一页打印两次

Question

我有一个 bootstrap 全屏模式，带有一个调用 window.print() 的打印按钮。当打印预览 window 弹出时，页面会加倍。我正在使用 bootstrap 5.

这里是 bootstrap 模式：

<div class="modal fade" id="Overlay" tabindex="-1" aria-labelledby="Overlay" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-bs-dismiss="modal" class="btn btn-outline-secondary me-5 no-print"><i class="fas fa-angle-left"></i> Go Back</button>
                    <h1 class="modal-title" id="Overlay">@Title</h1>
                    <button type="button" class="btn-close no-print" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body instructions-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="window.print()">Print Instuctions</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

有什么想法吗？

谢谢，贾斯汀。

Answer 1

问题是模式下的内容决定了打印的页数，如果您尝试打印模式的内容，它将打印等于基础文档中页数的副本。

我不得不使用@media 打印样式表隐藏模态，以使用可见性隐藏正文：隐藏；然后做一些花哨的 javascript onclick 打印按钮来克隆我想打印的部分：

function printModal() {
  printElement(document.getElementById("printContainer"));

  var modThis = document.querySelector("#printSection .print");
  modThis.appendChild(document.createTextNode(" "));

  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.innerHTML = "";

  $printSection.appendChild(domClone);
}

这是模态 HTML:

    <!-- Modal -->
<div class="modal fade" id="Overlay" tabindex="-1" aria-labelledby="Overlay" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title align-content-center">@Title</h1>
                <button type="button" class="btn-close no-print" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="printContainer" class="print modal-body instructions-body">
                // Stuff to print
               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" @onclick="printModal()">Print Instuctions</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

提示：使用开发工具模拟打印视图：点击右上角的三个点>更多工具>渲染，设置“模拟css媒体类型”打印。这并不完全准确，但会告诉您打印机将隐藏和可见的内容。

使用 bootstrap 全屏模式时同一页打印两次

Same page prints twice when using a bootstrap full screen modal

printing

twitter-bootstrap

bootstrap-modal