如何使用 JavaScript 打印带有 <style> 标签的 Shadow DOM？答案

【问题标题】：How to use JavaScript for print a Shadow DOM with <style> tags inside?如何使用 JavaScript 打印带有 <style> 标签的 Shadow DOM？
【发布时间】：2017-02-07 17:14:51
【问题描述】：

我正在尝试通过 JS 打印 shadow dom 的内容。

看起来很简单：

var reportBody = document.getElementById('daily-report-old').shadowRoot.innerHTML.toString().trim();

在此之后，我在 reportBody 变量中拥有了我想要的全部内容。

然后，我将尝试打印它：

var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(reportBody);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();

我找到了这个打印代码here。

我得到的只是一个空白/空页面。我怀疑 shadow dom 中的一些硬编码 css 正在扮演一些烦人的角色。

有人知道打印 shadow dom 内容的正确方法吗？问候。

【问题讨论】：

1) 您是否通过设置一个简单的 reportBody 变量来尝试您的打印功能？ 2）你的 shadom dom 的内容是什么？
很奇怪，在控制台中，该功能可以工作，这就是我之前尝试过的方式，[----但在实际代码中它没有 ---] 抱歉，它确实有效
shadow dom 里面有一个巨大的页面，里面有很多

标签： javascript shadow-dom

【解决方案1】：

嗯，这对我来说似乎很棘手，但是：

var reportBody = document.getElementById('daily-report-old').shadowRoot.innerHTML.toString().trim();
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title></head><body>' + reportBody + '</body></html>');
mywindow.document.close();
mywindow.focus();
setTimeout(function () {
    mywindow.print();
    mywindow.close();
}, 2000);

解决问题。

希望有人能给出更好的答案。

【讨论】：