Question

这篇文章显然没有很好地呈现，但我没有删除和重新发布，而是对其进行了编辑以试图让它更清晰。

简单地说，我的页面上有许多元素，我希望能够在特定div中打印内容，其中所有其他div都被隐藏。我发现了一篇描述如下定义样式的帖子：

<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中的内容更改为其他内容，如下所示，并使用eddie友情提供的信息回复此帖子。添加打印类是为了隐藏文档正文中的所有其他元素，print-me div现在设置为在打印窗口中显示。

$(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示例

enter link description here

您将看到打印窗口打开，我设置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并在打印窗口中显示。但是，htmlText按字面显示而不是html。

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

我希望这能更好地解释问题，感谢您对正在发生的事情以及如何解决问题和/或如何改进帖子的任何帮助/建议。

Answer 1

这适用于我。

HTML

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

CSS：在打印时，除了印刷品上的打印hidden外，您应将全部设为div

@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

1 个答案: