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

Question

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

这是我打印数据的函数：

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 的建议，

获取需要打印的data后，将该数据附加到某个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

作为类添加到打印布局中不需要的所有元素。

第 2 步：创建一个

<div id="printable-contents">

并为其添加显示属性

d-print-block

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

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 所示

Answer 7

打印时您可以使用事件“afterprint”进行检测。

示例：

document.addEventListener('afterprint', closeModal);