打印模态内容后，关闭模态按钮不起作用

Question

我在模态上有打印按钮来打印模态的内容。 但是在单击打印按钮后数据打印正确但关闭模态并取消模态不起作用。

这是我的 function 用于打印数据：

var printContents = document.getElementById('print_data').innerHTML;  
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();
document.body.innerHTML = originalContents;

在此之后我无法关闭模态。

Answer 1

var printContents = document.getElementById('print_data').innerHTML;  
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();
document.body.innerHTML = originalContents;
setTimeout(function() {
                location.reload();
           }, 1000);
}

Answer 2

当您更改页面的 HTML 时，您向按钮注册的事件也消失了。 因此，您需要将事件重新附加到按钮。

---

更好的方法是使用 CSS 隐藏您的内容，不要覆盖它，如下面的评论。

Answer 3

您可以使用以下任何一种方法来执行此操作：

1）使用.on()方法如下：

$('.closeButton').on('click',function(){
    // do your stuff
    // You need to call close model function as per the model js you have used
  });

2）使用.delegate()方法如下：

$('body').delegate('.closeButton','click',function(){
    // do your stuff
  });

3）您可以在替换HTML后绑定点击事件，如下所示：

$('.closeButton').bind('click');

Answer 4

根据 DucFilan 和 Frankusky 的建议，

获取需要打印的数据后，将该数据附加到某个 div 并隐藏其他元素（期望您附加数据的 div）。 打印数据后，显示隐藏元素并隐藏数据 div，如下所示，

  var printContents = document.getElementById('print_data').innerHTML;
  document.getElementById('printContents').innerHTML = printContents;
  var allElements = document.body.children;
  for(var i = 0; i < allElements.length; i++) {
    if(allElements[i].getAttribute('id') !== "printContents") {
        allElements[i].style.display = "none";
    }
  }

  window.print();

  for(var i = 0; i < allElements.length; i++) {
    if(allElements[i].getAttribute('id') !== "printContents") {
        allElements[i].style.display = "block";
    } else {
        allElements[i].style.display = "none";
    }
  }

工作示例 - https://jsfiddle.net/totpvcrh/1/

注意：在小提琴中，关闭打印对话框后，您将在打开模式按钮下方收到消息。 无需为此烦恼。 在网站上它工作正常。

Answer 5

下面的代码只是简单地克隆您要打印的元素并将其放入 ID 为 PrintSection 的新 div 中。 请注意，您不必创建一个 ID 为 PrintSection 的 div，因为 JS 代码旨在自动处理创建

新 div PrintSection 的 css

@media screen {
              #printSection {
                  display: none;
              }
            }

            @media print {
              body * {
                visibility:hidden;
              }
              #printSection, #printSection * {
                visibility:visible;
              }
              #printSection {
                position:absolute;
                left:0;
                top:0;
              }
            }

js处理其他元素的克隆和隐藏

function printDiv(divName) {
    var elem = document.getElementById(divName)
    
    var domClone = divName.cloneNode(true);
    
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.style = "width: 100%;";
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    
    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}

Answer 6

我知道几年前有人问过这个问题，但为了帮助解决打印对话框后模式关闭按钮不起作用的问题，这是我最终得到的一个非常简单的解决方案。

第 1 步：将显示属性d-print-none作为 class 添加到打印布局中不需要的所有元素。

第 2 步：创建一个<div id="printable-contents">并向其添加显示属性d-print-block

第 3 步：使用此 function，它是您已用于打印元素的 function 的修改版本。 注意：您可以将模态 ID 传递给 function，隐藏它，打印然后显示给用户

function printElements(element,modal) {
$('.modal').modal('hide'); //Hide all modals to prevent greying out contents

var printContents = document.getElementById(element).innerHTML; // Get printable contents

$('#printable-content').html(printContents); // Populate the printable element

// Wait a while a print your contents
setTimeout(function(){
    window.print();
    $('#printable-content').html(''); // Clear the printable contents
    $('#'+modal).modal('show'); // Show the modal 
},250);

};

链接以显示 Bootstrap 5 示例的属性类