如何在 Angular 中打印单个组件？

Question

在单个角度组件中，我希望有一个打印按钮，当用户单击该按钮时，它将从我的组件模板中打印一个div 。

我知道这个答案有效，我已经尝试过了。 但我不喜欢我需要重新应用所有样式或重写<style>头标签中的所有样式。

我真的很喜欢这个答案，但我无法让它发挥作用。 我认为这可能与在服务/构建应用程序后如何重命名类有关。

这就是我实现上述答案但无法使其工作的方式。

组件.ts

onPrint() {
  window.print();
}

组件.html

<div class="print">
  <button (click)="onPrint()">Print</button>
  all the stuffs I want to print
</div>

组件.scss

@media print {
  :not(.print) {
    display: none !important;
  }
}

我怎样才能得到上述答案以尽可能少地工作，并保留应用于前端的样式？

我意识到这个问题与这个问题有多么相似，但这个问题是在大约两年前提出的，关于角度 2。不太确定它与角度 6 有多大不同。

Answer 1

组件 CSS 中的样式仅适用于该单个组件，这就是仍显示父组件 mat 选项卡的原因。

作为替代方案，您可以将样式添加到style.css / styles.scss中。 这样做的问题是父 DOM 元素（例如body ）将被设置为display: none ，所以什么都不可见。

您可以尝试在styles.css使用visibility ，如下所示：

@media print {
  :not(.printMe) {
    visibility: hidden;
  }
}

@media print {
  .printMe {
    visibility: visible
  }
}

根据您的用例，这可能会有所帮助，尽管hidden的元素仍会占用页面上的空间。

这是 StackBlitz 的一个分支来演示

Answer 2

一个简单的解决方案可能是在页面内容上显示div ：

@media print {
 .print {
    position: fixed;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}

Answer 3

<div [AppendToPrint]="true">
</div>

调用此函数后，每个具有 AppendToPrint 指令的元素将显示在打印窗口中

窗口.打印（）；

@Directive({
  selector: '[AppendToPrint]'
})
export class AppendToPrintDirective implements AfterViewInit {

  private elementIdToPrint: string = 'print';

  isPrinted: boolean = true;
  clone;

  @Input("AppendToPrint")
  set appendToPrint(value: boolean) {
    this.isPrinted = value;
  }


  constructor(private elRef: ElementRef) {
  }

  ngAfterViewInit(): void {
    
    this.cloneElement();

    if (document.getElementById(this.elementIdToPrint)) {

      document.getElementById(this.elementIdToPrint).appendChild(this.clone);
    }
  }
  
  cloneElement(): void {
    this.clone = this.elRef.nativeElement.cloneNode(true);
  }

  ngOnChanges() {
    if (this.isPrinted) {
      this.resetPrint();
    }
    else {
      this.cloneElement();
        document.getElementById(this.elementIdToPrint).innerHTML = '';
        document.getElementById(this.elementIdToPrint).appendChild(this.clone);
      }
  
  }

  //#region == private methods ==

  private resetPrint(): void {
    document.getElementById(this.elementIdToPrint).innerHTML = '';
    this.isPrinted = false;
  }

  ///#endregion
}

Answer 4

对我有用的唯一方法是隐藏我正在打印的元素之外的所有元素。 由于样式问题，将 HTML 复制到新窗口（和类似的解决方案）对我不起作用。

以下代码需要 jQuery 才能工作。

print(triggerElement): void
{
    const toShow = this.hideParentSiblings($('#print-section'));
    $(triggerElement).hide();

    window.print();

    for (const e of toShow)
    {
        e.show();
    }

    $(triggerElement).show();
}

hideParentSiblings(element): any[]
{
    let parent;
    const toShow = [];

    while ((parent = element.parent()).length)
    {
        const visible = parent.siblings().find(':visible');
        toShow.push(visible);
        visible.hide();
        element = parent;
    }

    return toShow;
}