単一の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に関して。
コンポーネント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
要素は引き続きページ上のスペースを占有します。
簡単な解決策は、ページのコンテンツの上にdiv
を表示することです。
@media print {
.print {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
私のために働いた唯一の方法は、私が印刷しているもの以外のすべての要素を隠すことでした。 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;
}