web-dev-qa-db-ja.com

Angularで単一のコンポーネントを印刷するにはどうすればよいですか？

単一のangularコンポーネントで、ユーザーがクリックすると、コンポーネントのテンプレートから単一のdivを印刷する印刷ボタンが必要です。

私は知っています this 答えはうまくいきます、私はそれを試しました。しかし、すべてのスタイルを再適用したり、<style>ヘッドタグのすべてのスタイルを書き直したりする必要があるのは好きではありません。

私は本当に好きです 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 1にどれほど似ているかはわかりますが、この質問はほぼ2年前に、angular 2。との違いがよくわかりません。 angular 6に関して。

angularprintingreport
4
gh0st

コンポーネントCSSのスタイルは、その個々のコンポーネントにのみ適用されます。そのため、親コンポーネントのマットタブが引き続き表示されます。

別の方法として、スタイルをstyle.css/styles.scssに追加することもできます。これに伴う問題は、親DOM要素（bodyなど）もdisplay: noneに設定されるため、nothingが表示されないことです。

代わりに、次のようにstyles.cssでvisibilityを使用してみることができます。

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

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

ユースケースによっては、これが役立つ場合がありますが、hidden要素は引き続きページ上のスペースを占有します。

これが実演するStackBlitzのフォークです

2
user184994

簡単な解決策は、ページのコンテンツの上にdivを表示することです。

@media print {
 .print {
    position: fixed;

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

私のために働いた唯一の方法は、私が印刷しているもの以外のすべての要素を隠すことでした。 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;
}
0
Ahmed Elsawalhy