Question

我使用默认打印功能进行打印，但一旦打印功能完成，我就无法点击其他标签。打印窗口在同一页面中打开

function printReport() {
    var divElements = $('.nicEdit-main').html();
    var oldPage = document.body.innerHTML;
    document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>";
    window.print();
    document.body.innerHTML = oldPage;
}

Answer 1

不幸的是，您刚刚更换了整个页面。 innerHTML仅返回HTML 的字符串形式减去处理程序和附加到元素的任何数据。设置innerHTML将从该字符串重新创建DOM，而不使用最初附加的处理程序。你只是“有效地”瘫痪了这个页面！

我建议：

艰难的方法是继续您正在做的事情，但将所有处理程序委派给document，例如live将如何完成，以便不会删除它们。很难，可能，但不可扩展，可维护或最佳。
或者您可以创建一个隐藏的iframe并将您的内容打印在那里。然后从该iframe print拨打window。这样，您就不会丢失当前页面。
其他人会创建一个新窗口，将内容放在那里，然后运行打印并立即关闭它。与iframe的工作方式相同，但您不希望像一些弹出式广告那样立即打开和关闭令人毛骨悚然的窗口。

Answer 2

你正在失去事件管理。你应该隐藏并显示你想要打印的内容。之后，您可以重新显示原稿并隐藏打印的内容。

您可以使用媒体查询在打印页面时更改页面样式。

@media print { 
 /* All your print styles go here */
   .nicEdit-main {
      display: block !important;
      width:100%;
   } 
}

Answer 3

你不应该替换整个页面的html，因为这会删除所有点击处理程序（例如处理标签的那些）

要打印，您应该执行以下操作：

创建一个显示在所有内容之上的div（固定，高度/宽度：100％，顶部/左侧：0）
隐藏身体内的一切
将要打印的内容添加到div
致电打印
删除div
恢复身体状态

类似的东西：

JS

function printReport() {
    var $printerDiv = $('<div class="printContainer"></div>'); // create the div that will contain the stuff to be printed
    $printerDiv.html(divElements); // add the content to be printed
    $('body').append($printerDiv).addClass("printingContent"); // add the div to body, and make the body aware of printing (we apply a set of css styles to the body to hide its contents)

    window.print(); // call print
    $printerDiv.remove(); // remove the div
    $('body').removeClass("printingContent");
}

CSS

body.printingContent > *{
    display: none !important; /* hide everything in body when in print mode*/
}

.printContainer {
    display: block !important; /* Override the rule above to only show the printables*/
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

打印功能后无法单击其他选项卡

3 个答案: