Angular4：如何为包括印刷test.component.css

Question

我有一个打印按钮一个组成部分。但是，当我从test.component.css打印CSS是不包括。任何人都可以请帮我这个问题？注：我已经让CSS只在test.component.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

您可以从头标记您在目前的风格和追加到您的打印HTML标记如下使用jQuery（$（“头”）。克隆（）。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();
}

Answer 2

你可能会使用网络组来运行你的web应用程序？如果是这样，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回答：2

2个回答

最新问题

Angular4：如何为包括印刷test.component.css

问题描述 投票：2回答：2

2个回答

最新问题

问题描述投票：2回答：2