Question

我有一个带打印按钮的组件。但是，当我从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;
}

以下是浏览器中的输出：

这是打印输出

Answer 1

您可以从Head标签获取当前样式，并使用jquery（$（'head'）。clone（）。html（））附加到您的print html标签，如下所示。此外，如果您在index.html中使用像bootstrap这样的外部库，请在index.html中将print也作为媒体添加如下： -

<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();
}

Answer 2

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

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

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

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

2 个答案: