如何在Angular 2中制作可打印的页面

Question

下面有一张图片来帮助解释：

长话短说，我的客户希望只有红色区域的可打印版本显示在新标签中，以便他们可以使用浏览器进行打印。 （没有来自app.component和AllItems组件的混乱）

我无法想出一个更好的解决方案，而不是让“All Items”组件有一个按钮，将所有生成的html（因为它依赖于“All Items”中的数据）导出到它自己的.html文件中。打开一个直接链接。

提前谢谢！

Relevent，但Angular 1：How to use Angular to create n printable pages?

Answer 1

找到了答案，这是一个我忘记的简单的javascript事情。

// Open used in new window
let data = document.getElementsByClassName("Items-Container")[0].innerHTML;
let newWindow = window.open("data:text/html," + encodeURIComponent(data),
  "_blank");
newWindow.focus();

我仍然需要添加css，但如果有其他人发现自己，这就是我的解决方案。

编辑： 使用css隐藏所有外部部分是更好的方法。

@media print {
    header nav, footer {
       display: none;
    }
}