window.print() 不显示更新 div

Question

这个 post 显然没有很好地呈现，但我没有删除并重新 post，而是对其进行了编辑以使其更清晰。

简而言之，我的页面上有许多元素，我希望能够仅在隐藏所有其他 div 的特定 div 中打印内容。我发现 post 描述了如下定义样式：

<style>
    @media print {
        body.printing * { display: none; }
        body.printing #print-me { display: block; }
    }

    @media screen {
        #print-me { display: none; }
    }  
</style>

在正文中我有一个 div 如下：

<div id='print-me'>
      <h1>Hello Plunker!</h1>
</div>

加载文档后，我正在尝试将 print-me div 中的内容更改为如下所示的其他内容，并使用回复此问题的埃迪友情提供的信息 post.添加了打印 class 以隐藏文档正文中的所有其他元素，而 print-me div 现在设置为显示在打印 window.

中

$(document).ready(function() {
  $("body").addClass("printing");
  document.getElementById('print-me').innerHTML = '<p>crikey</p>';

  var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-me" ).html( htmlText ).promise().done(function() {
            window.print();
    });
});

但是，如果您查看下面的 Plunker 示例 link

enter link description here

您会看到 print window 打开，而我设置 print-me div 的文本不显示。有问题的代码如下所示：

  $("body").addClass("printing");

  var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-me" ).html( htmlText ).promise().done(function() {
            window.print();
    });

如果我将其更改为：

  $("body").addClass("printing");

  var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-me" ).text( htmlText ).promise().done(function() {
            window.print();
    });

然后更新 print-me div 并显示在 print window 中。但是，html 文本按字面显示而不是 html。

为什么前者不显示而后者显示，尽管是纯文本。

我希望这能更好地解释问题，感谢您 help/suggestions 关于发生了什么以及如何解决问题 and/or 如何改进 post。

Answer 1

这对我有用。

HTML

<div id='print-section'></div>
<div id='print-btn'></div>

CSS: 打印时，除了打印 div on print

外，你应该设置为 hidden

@media print {
    body * {
        visibility: hidden;
    }

    @page {size: portrait}

    #print-section {
        visibility: visible;
        width : 100%;
        height : auto;
    }
}

JS: 在按钮上，您应该等待 html 完全添加动态内容并调用 window.print();

$("#print-btn").click(function(){
     var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-section" ).html( htmlText ).promise().done(function() {
            window.print();
    });
});

window.print() 不显示更新 div

window.print() doesn't show updated div

html

printing

jquery

hidden