Question

我是JavaScript的初学者。所以这个问题可能听起来很傻。据我所知，window.print()，它会在窗口中打印文档正文标记中的内容或innerHTML。在以下代码段中，

我的HTML页面：

 <html>

      <head>
        <link rel="stylesheet" href="style.css">  
      </head>

      <body>
        <h1>Hello Plunker!</h1>
        <h2>Hi this is a header</h2>
        <h3>Hi this is a header 2</h3>
        <script src="script.js"></script>
      </body>

</html>

我的Js代码：（script.js）这里我只是将文档正文作为Hello world

var restore = document.body.innerHTML;
document.body.innerHTML = "Hello World";
window.print();
document.body.innerHTML = restore;

在这种情况下，不应该在打印页面上显示hello world吗？

Why is

       Hello Plunker!
       Hi this is a header
       Hi, this is a header 2 coming up?

编辑：我错过了最后一行，身体的innerhtml再次被设置为恢复。谢谢你的帮助

Answer 1

你好世界即将到来并尝试使用codepen取得好成绩。找出听到https://codepen.io/anon/pen/zWQdBW

    var restore = document.body.innerHTML;
document.body.innerHTML = "Hello World";
window.print();

Answer 2

考虑使用事件onbeforeprint和onafterprint（就像我的例子中一样），或者甚至是一个特殊的“打印”CSS文件。
您的方法可能不起作用，因为window.print()在执行后不会停止代码。

var previousBodyContent;
window.addEventListener("beforeprint", function() {
  previousBodyContent = document.body.innerHTML;
  document.body.innerHTML = "Hello World";
});

window.addEventListener("afterprint", function() {
  document.body.innerHTML = previousBodyContent;
});

window.print();

<h1>Hello Plunker!</h1>
<h2>Hi this is a header</h2>
<h3>Hi this is a header 2</h3>

编辑：关于行为的更多说明：

据我所知，window.print()，它会在窗口中打印文档正文标记中的内容或innerHTML。

不完全是，window.print()只是告诉浏览器打开打印对话框。就像你进入“菜单”＆gt;一样“打印...”或按ctrl + p。

如果您在通话结束后快速更改内容，则在您拨打window.print()时页面的内容不一定是您在打印预览中看到的内容或打印的内容。

window.print（）无法按预期工作

2 个答案: