将内容从 div 复制到新窗口并保持样式？答案

【问题标题】：Copy content from a div into a new window and keep styling?将内容从 div 复制到新窗口并保持样式？
【发布时间】：2016-03-15 09:24:58
【问题描述】：

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

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（因此它适用于弹出窗口）

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

【问题讨论】：

你能添加你的 HTML 吗？
没有。这将是太多而且它不是那么相关。这是一个带有大量 css 文件的 wordpress 安装。我有一个 ss 文件，我想将其包含在我自己制作的插件中。

标签： javascript jquery

【解决方案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>

【讨论】：

这不起作用？ div #e 一直都在。

【解决方案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;

【讨论】：