关闭页面导航时更改仿真 - angular javascript
[英]Change emulation back when navigating off page - angular javascript
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
问题描述
我在一个特定页面上的 component.ts 文件中有以下代码，因为该页面在打印页面时需要使用它自己的 css：
@Component({
selector: "dashboard",
templateUrl: "./dashboard.component.html",
styleUrls: ["./dashboard.component.scss"],
encapsulation: ViewEncapsulation.None
})
但是，当我离开该页面时，我希望对 go 的封装在其他任何地方恢复正常。 有没有办法做到这一点？
或者有没有办法只在单击打印按钮时设置封装？ 然后关闭后又恢复正常？
如果我离开此页面并刷新，则其他页面 go 恢复正常，但我不想刷新。
编辑
我必须添加封装，以便使用 scss 文件中的此代码让页面打印横向：
@media print {
@page {
size: landscape
}
.no-print,
.no-print * {
display: none !important;
}
body {
-webkit-print-color-adjust: exact;
}
canvas {
max-width: 100%;
height: auto;
}
.printClass {
display: inline-block;
}
}
否则，它每次只会获取全局 scss 并打印肖像。
1 条回复
1楼 Flo 0 2023-02-01 20:39:38
是的。 在此示例中，我们使用ngx-print 。 这是您可以在GitHub上看到的图书馆。 您不使用它，但它使用正确的方式并且非常简单。
npm install ngx-print
使用
<!--
1)- Add an ID here
-->
<div id="print-section">
<!--Your html stuff that you want to print-->
</div>
<!--
2)- Add the directive name in your button (ngxPrint),
3)- Affect your ID to printSectionId
-->
<button printSectionId="print-section" ngxPrint>print</button>
您可以在 css 中进行设置。这是一个示例：
- 当我不使用 [useExistingCss]="true" 应用 css 时，尝试打印时会出现布局下拉选项（纵向或横向）。
- 我的 css 包含 @media print{@page {size: landscape}} 行，但它似乎被 ngx-print 忽略了。
- 如果我使用 {size: landscape,important}。 它将横向打印。
- 如果我使用 {size: auto,important}。 提供了布局选项。
这是它的核心：
public print(): void {
let printContents, popupWin, styles = '', links = '';
const baseTag = this.getElementTag('base');
if(this.useExistingCss) {
styles = this.getElementTag('style');
links = this.getElementTag('link');
}
printContents = this.getHtmlContents();
popupWin = window.open("", "_blank", "top=0,left=0,height=auto,width=auto");
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>${this.printTitle ? this.printTitle : ""}</title>
${baseTag}
${this.returnStyleValues()}
${this.returnStyleSheetLinkTags()}
${styles}
${links}
</head>
<body>
${printContents}
<script defer>
function triggerPrint(event) {
window.removeEventListener('load', triggerPrint, false);
${this.previewOnly ? '' : `setTimeout(function() {
closeWindow(window.print());
}, ${this.printDelay});`}
}
function closeWindow(){
window.close();
}
window.addEventListener('load', triggerPrint, false);
</script>
</body>
</html>`);
popupWin.document.close();
问题未解决？试试搜索： 关闭页面导航时更改仿真 - angular javascript。
<input type="“file”">导航回页面时再次触发更改事件
[英]<input type=“file”> change event firing again when navigating back to the page
导航回页面时如何自动重新执行javascript keyup功能？
[英]How to re-perform the javascript keyup function automatically when navigating back to the page?
导航离开页面并返回时，不会保留JS页面格式
[英]JS page formatting is not retained when navigating away from a page and back
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.