Question

要复制新页面，您可以执行以下操作：

var yourDOCTYPE = "<!DOCTYPE html..."; // your doctype declaration
var printPreview = window.open('about:blank', 'print_preview');
var printDocument = printPreview.document;
printDocument.open();
printDocument.write(yourDOCTYPE+
           "<html>"+
               document.documentElement.innerHTML+
           "</html>");
printDocument.close();

来源：Copy Current Webpage Into a New Window

我该如何写这个

printDocument.write(yourDOCTYPE+
"<html>"+
document.documentElement.innerHTML+
"</html>");

所以它只包括#report？我希望css完好无损，所以不可能这样做：

printDocument.write(yourDOCTYPE+
"<html>"+
document.getElementById('report').innerHTML+
"</html>");

因为原始页面的样式已经消失。

更新一个选项是在打开新的弹出窗口时隐藏所有隐藏在dom中除#report之外的所有元素。

但是我怎么用纯粹的js？

如果我在jquery中做这样的事情：

$('body > :not(#report)').hide(); //hide all nodes directly under the body
$('#report').appendTo('body');

它会在原始窗口中隐藏除#report之外的其他东西（当然）。我不明白如何将其应用于printDocument.write（因此它适用于弹出窗口）

我也不必是一个弹出窗口。它也可以是一个在浏览器中打开的新窗口，如果有人可以告诉我如何解决这个问题。

Answer 1

您可以获取样式标记和报告元素，并将它们添加到新页面中：

var printPreview = window.open('about:blank', 'print_preview');
var printDocument = printPreview.document;
printDocument.open();
printDocument.write("<!DOCTYPE html><html><head>" +
    document.getElementsByTagName("style")[0].outerHTML + "</head><body>" +
    document.getElementById("report").outerHTML + "</body></html>");
printDocument.close();

<!DOCTYPE html>
<html>

<head>
  <style>
    .report {
      color: red;
    }
  </style>

</head>

<body>
  <div id="report" class="report">report</div>
  <div id="e">e</div>
</body>

</html>

Answer 2

如果有人遇到同样的问题，请在css-element上添加一个ID，然后根据该ID获取样式。

function openPP() {
    var printPreview = window.open('about:blank', 'print_preview', "resizable=yes,scrollbars=yes,status=yes");
    var printDocument = printPreview.document;
    printDocument.open();
    printDocument.write("<!DOCTYPE html><html>"+              
    document.getElementById('csslink').outerHTML +
    document.getElementById('report').innerHTML+
    "</html>");
    printDocument.close();
}
window.openPP = openPP;

将div中的内容复制到新窗口并保持样式？

2 个答案: