gpt4 book ai didi

css - 打印中的 Angular4 : How to include test. component.css

转载 作者:行者123 更新时间:2023-11-28 11:26:02 25 4
gpt4 key购买 nike

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

测试.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>

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

}

测试.component.css:

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

这是浏览器中的输出:

Here is the output in browser:

这是打印输出

Here is the printing output

最佳答案

您可以使用 jquery($('head').clone().html()) 从 Head 标签获取当前样式并附加到打印 html 标签,如下所示。此外,如果您在 index.html 中使用外部库(如 bootstrap),请在 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();
}

关于css - 打印中的 Angular4 : How to include test. component.css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46195819/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com