离开页面时将模拟更改回-Angular javascript

pxiryf3j 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(113)

我在一个特定页面的component.ts文件中有以下代码，因为该页面在打印时需要使用自己的css：

@Component({
  selector: "dashboard",
  templateUrl: "./dashboard.component.html",
  styleUrls: ["./dashboard.component.scss"],
  encapsulation: ViewEncapsulation.None
})

然而，当我离开该页面时，我希望其他所有地方的封装都恢复正常，有没有办法做到这一点？
或者有没有办法只在点击打印按钮时设置封装？然后在关闭时恢复正常？
如果我离开此页面并刷新，则其他页面将恢复正常，但我不希望必须刷新。
编辑
我不得不添加封装，以便使用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和打印肖像每一次。

JavaScript

来源：https://stackoverflow.com/questions/75314590/change-emulation-back-when-navigating-off-page-angular-javascript

1条答案

按热度按时间

jtw3ybtb1#

是的。在这个例子中我们使用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中设置一些东西，下面是一个例子：
1.当我不使用[useExistingCss]=“true”应用CSS时，在尝试打印时会出现布局下拉选项（纵向或横向）。
1.我的css包含@media打印{@页{大小：landscape}}行，但ngx-print似乎忽略了它。
1.如果我使用{size：横向！重要信息}，则将以横向打印。
1.如果我使用{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();

赞(0）回复(0）举报 2023-02-02

我来回答

离开页面时将模拟更改回-Angular javascript

1条答案

相关问题

热门标签

最新问答