如何在Angular 2中制作可打印页面 [英] How to make a printable page in Angular 2

问题描述

在此处提供图片以帮助说明:

Heres an image to help explain:

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

Long story short, my client wants a printable version of just the red area to show up in a new tab, so they can print it with the browser. (Without the clutter from app.component and AllItems component)

我没有比所有项目"组件具有一个按钮将所有生成的html导出(因为它取决于所有项目"中的数据)导出到其自己的.html文件更好的解决方案，并且打开与此的直接链接.

I can't come up with a better solution than having the "All Items" component have a button that exports all of the generated html (because it's dependent on data from "All Items") into its own .html file and opening a direct link to that.

提前谢谢！

事件，但是Angular 1:如何使用Angular来创建n个可打印页面?

Relevent, but Angular 1: How to use Angular to create n printable pages?

推荐答案

找到了答案，这是我忘记的一个简单的javascript内容.

Found the answer, it's a simple javascript thing that I had forgotten.

// 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，但是如果有人在这里找到自己，这就是我的解决方案.

I still need to add the css to it, but if anyone else finds themselves here, this is the solution for me.

使用CSS隐藏所有外部零件是更好的方法.

Using css to hide all of the outside parts is the better way to go.

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

这篇关于如何在Angular 2中制作可打印页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！