將div內容複製到新窗口並保留樣式？

要複製一個新的頁面，你可以做這樣的事情：將div內容複製到新窗口並保留樣式？

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>");

因爲然後原始頁面的樣式消失了。

UPDATE 一個選擇是躲都躲DOM中的所有元素，除了#report時開闢了新的彈出窗口。

但我怎麼在純js？

如果我做jquery的是這樣的：

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

它會隱藏（當然）原來的窗口，除了#report eveything。我不明白如何將其應用於printDocument.write（所以它適用於彈出窗口）

我不必是一個彈出窗口。如果有人能夠給我一個想法如何解決這個問題，它也可能是一個在瀏覽器中打開的新窗口。

來源

2016-03-15 bestprogrammerintheworld

你可以添加你的HTML嗎？ –

不會，它會很多，而且沒有那麼相關。這是一個很多css文件的wordpress安裝。我有一個ss文件，我想將其包含在我自己創建的插件中。 – bestprogrammerintheworld

你可以得到你的風格標籤和報表元素，並將它們添加到新的頁面：

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>

來源

2016-03-15 10:08:36

這不起作用？ div #e始終在那裏。 – bestprogrammerintheworld

如果有人絆倒在同一問題上，把一個ID的CSS-元素，然後根據該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;

來源

2016-03-15 11:14:37 bestprogrammerintheworld

將div內容複製到新窗口並保留樣式？

回答

相關問題