Question

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

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

我真的很喜欢this的答案，但无法正常工作。我认为这可能与在服务/构建应用程序后重命名类的方式有关。

这是我实现上述答案但无法正常工作的方式。

component.ts

onPrint() {
  window.print();
}

component.html

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

component.scss

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

我如何才能得到上述答案，以尽可能减少代码的产生，并保留应用于前端的样式？

我知道这个问题与this有多么相似，但是这个问题是在两年前就有关角度2的问题提出的。不太清楚关于角度6的问题是什么。

Answer 1

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

您也可以将样式添加到style.css / styles.scss中。这样做的问题是父DOM元素（例如body）也将设置为display: none，因此没有任何可见。

您可以改为像这样在visibility中使用styles.css：

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

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

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

Here is a fork of the StackBlitz to demonstrate

Answer 2

对我有用的唯一方法是隐藏我正在打印的元素之外的所有元素。由于样式问题，将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;
}

Answer 3

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

@media print {
 .print {
    position: fixed;

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

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

3 个答案: