5

我正在使用默认打印功能进行打印，但是一旦打印功能完成，我就无法单击其他选项卡。打印窗口在同一页面中打开

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;
}
4

3 回答 3

5

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

我建议：

  • 困难的方法是继续你正在做的事情，但将所有处理程序委托给document喜欢如何live完成它，这样它们就不会被删除。困难、可能，但不可扩展、可维护或最优。

  • 或者您可以创建一个隐藏iframe并将您的内容放置在那里打印。然后print从那个 iframe调用window。这样，您就不会丢失当前页面。

  • 其他人会创建一个新窗口，将内容放在那里，运行打印并立即关闭它。工作原理与 iframe 相同，但您不会想要一个像弹出广告那样立即打开和关闭的令人毛骨悚然的窗口。

于 2013-05-10T08:30:34.413 回答
3

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

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

@media print { 
 /* All your print styles go here */
   .nicEdit-main {
      display: block !important;
      width:100%;
   } 
}
于 2013-05-10T08:30:19.227 回答
3

您不应该替换整个页面的 html，因为这会删除所有单击处理程序（例如处理选项卡的处理程序）

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

  1. 创建一个显示在所有内容上方的 div（固定，高度/宽度：100%，顶部/左侧：0）
  2. 隐藏身体中的一切
  3. 将要打印的内容添加到 div
  4. 来电打印
  5. 删除 div
  6. 恢复身体状态

就像是：

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%;
}
于 2013-05-10T08:34:26.740 回答