Html 如何使用 TS 在 Angular 4 中打印页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50567852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to print a page in Angular 4 with TS
提问by nideba
I have an web app while in some pages I need to make a printer to print the page but I have a side bar and the rest ist the page for a component, how it is possible to not print the sidebar only this component, I have used in TS this code.
我有一个 Web 应用程序，而在某些页面中，我需要制作打印机来打印页面，但我有一个侧边栏，其余部分是组件的页面，怎么可能不只打印这个组件的侧边栏，我有在 TS 中使用此代码。
print() {
window.print();
}
Html code starts from this one.
Html 代码从这个开始。
div class="container">
//Here I have all the HTML source
</div>
回答by Mohd Tabish Baig
first of all assign an id to that component, then:
首先为该组件分配一个 id，然后：
const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();
回答by Krishna Rathore
You can try this solution.
你可以试试这个解决方案。
html file
html文件
<div class="container" id="component1">
//Here I have all the HTML source
</div>
<div class="container" id="component2">
//Here I have all the HTML source
</div>
<button (click)="printComponent('component1')">Print</button>
ts file
.ts 文件
printComponent(cmpName) {
let printContents = document.getElementById(cmpName).innerHTML;
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
回答by Ajay Reddy
In the side bar component scss file or css file...you can hide it when you are printing using media queries:
在侧边栏组件 scss 文件或 css 文件中...您可以在使用媒体查询打印时隐藏它：
@media print {
:host {
display: none;
}
}
