使用引导全屏模式时，相同的页面打印两次。

Question

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

下面是引导模式：

<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 print样式表隐藏模式，以使用可见性隐藏身体；然后在print按钮上单击一些花哨的javascript来克隆我想要打印的部分：

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>

提示：使用开发工具模拟打印视图:单击右上角的3个点>多个工具>呈现，设置“模拟css媒体类型”打印。这不是完全准确，但将向您显示什么将是隐藏的和可见的打印机。