Question

美好的一天。

我目前正在开发一个项目，可以将所需的<div>打印到打印机。

以下是代码：

    var printContents = document.getElementById(id).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;
    document.body.style.display = "none";

    window.print();

    document.body.innerHTML = originalContents;
    document.body.style.display = "block";

此代码可以工作并打印所需的<div>，但之后我需要再次放回上一页，所以我使用了这个语句：

document.body.innerHTML = originalContents;
document.body.style.display = "block";

这会显示上一页，但我按钮的功能已消失？！有人可以向我解释发生了什么，是否有解决这个问题的方法？提前谢谢！

Answer 1

这种情况正在发生，因为你已经删除了有事件连接到它的旧DOM，并用一个全新的，不同的DOM替换它，恰好有相同的HTML。

据推测，您采用这种方法是因为可打印区域是在运行时确定的。一个破坏性较小的解决方案可能是创建一个新的<iframe>并将所需的标记复制到其中;然后在iframe上调用print()。类似的东西：

var printElement = function(element) {
    var frame = document.createElement('iframe');
    document.appendChild(frame);
    frame.contentDocument.innerHTML = element.innerHTML;
    frame.contentWindow.print();
    document.removeChild(frame);
};

您还需要将任何CSS引用复制到<iframe>。

（请注意，这是伪代码，未经过测试）

Answer 2

您的代码清除文档，然后放回存储在originalContents中的HTML，但此变量只存储一个字符串，因此所有先前注册的事件处理程序都已消失。

为什么不创建打印样式表并隐藏除要打印的内容以外的所有内容？

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Answer 3

重置innerHTML时，不会重新获得所有事件处理程序。当您创建全新的DOM元素时，它们就会消失。

一个想法是在正文中有两个主div，一个是你的正常显示，另一个是你想要打印的。然后，您可以隐藏您不想显示的任何一个：

<body>
    <div id="mainContent">main screen content goes here</div>
    <div id="printContent">generated print content goes here</div>
</body>

// hide main content
var mainDiv = document.getElementById("mainContent");
mainDiv.style.display = "none";
// put content to print in the print div and show it
var printDiv = document.getElementById("printContent");
printDiv.innerHTML = document.getElementById(id).innerHTML;
printDiv.style.display = "block";

// print
window.print();

// restore visibility
mainDiv.style.display = "block";
printDiv.style.display = "none;

您也可以使用整个主体进行打印，并使用带有media="print"的样式表来控制您不希望打印的内容的可见性。

Answer 4

您可以为页面内的所有潜水添加点击事件，以便用户可以单击div。之后，在该div中添加一个类，该类在print CSS文件中定义。在css打印文件里面使用以下代码：

`*{display:none}
.printableDiv{display:block}`

定义打印css文件使用此代码： <link rel="stylesheet" type="text/css" href="print.css" media="print">（拉斐尔告诉过你）。祝你好运

设置document.body.innerHTML时，javascript无效

4 个答案: