Angular4：如何在打印中包含 test.component.css答案

【问题标题】：Angular4: How to include test.component.css in printingAngular4：如何在打印中包含 test.component.css
【发布时间】：2019-02-05 22:22:05
【问题描述】：

我有一个带有打印按钮的组件。但是，当我从 test.component.css 打印 css 时，不包括在内。谁能帮我解决这个问题？注意：我必须只在 test.component.css 中保留 css。我不想使用内联样式。

test.component.html：

 <div class='container'>
    <div>
        <button (click)='printContent()' class="btn btn-default">
            <span class="glyphicon glyphicon-print"></span> Print
        </button>
    </div>
    <div id='content'>Hello World</div>
</div>

test.component.ts:

    import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

    printContent() {
        let popupWin = window.open('', '_blank', 'width=1080,height=595');
        let printContents = document.getElementById("content").innerHTML;
        popupWin.document
            .write('<html><head>' +
            '<link rel="stylesheet" type="text/css" href="/test.component.css"/>' +
            '</head><body onload="window.print();">'
            + printContents + '</body></html>');

        popupWin.document.close();
    }

}

test.component.css：

#content{
    background-color: cyan;
    font-weight: bold;
}

这是浏览器中的输出：

这是打印输出

【问题讨论】：

标签： css angular printing

【解决方案1】：

您可以使用 jquery($('head').clone().html()) 从 Head 标记获取当前样式并附加到打印 html 标记，如下所示。此外，如果您在 index.html 中使用像引导程序这样的外部库，请在 index.html 中添加打印作为媒体，如下所示：-

<link rel="stylesheet" type="text/css" media="screen,print" href="assets/css/bootstrap.min.css">

//打印代码

printContent() {
    let popupWin = window.open('', '_blank', 'width=1080,height=595');
    let printContents = document.getElementById("content").innerHTML;
    popupWin.document
        .write(`<html>
         ${$('head').clone().html()}
        <body onload="window.print();">${printContents}</body></html>`);

    popupWin.document.close();
}

【讨论】：

很好的答案，对我帮助很大，但假设你已经包含了 jQuery。我认为${document.querySelector('head').innerHTML} 会是更好的选择。

【解决方案2】：

您可能正在使用 webpack 来运行您的网络应用程序？如果是这样，则 test.component.css 在运行时不存在 - 它被捆绑到其他文件中。

您是否考虑过在主 CSS 文件中使用媒体查询？ https://www.w3schools.com/css/css3_mediaqueries.asp

如果您喜欢当前的方法，您可能需要在项目中将 CSS 作为静态资产提供：Whats the default path for static files in Angular2?

【讨论】：

您可能正在使用 web pack 来运行您的网络应用程序？如果是这样，test.component.css 在运行时不存在 - 它被捆绑到其他文件中。 是的，我正在使用 ng serve 命令使用 angular-cli。编写媒体查询并不能解决我的问题。不能将我的 css 文件放在 assets 目录中，因为它会重复。
另外，您可以创建从资产目录到 CSS 源的符号链接。这将解决同步问题。
媒体查询不起作用，因为它没有识别 test.component.css。你能指导我如何在组件和打印中使用符号链接吗？
所以媒体查询的重点是为打印设置特定的 CSS。因此，例如，您可以将所有其他内容设置为在打印时不呈现（在您的其他 CSS 文件中），然后您可以调用 window.print()
对于符号链接，如果你使用的是 Linux 或 Mac，你会做类似ln -s src/app/test.component.css assets/test.component.css 的事情，然后assets/ 中会有一个文件与在src/app/test.component.css.