印刷用cssを特定の画面に付与したい

#1

事象
特定の画面に表示中画面を印刷する機能があり、以下の様に印刷用のcss(print.css)を取り込みたいのですが、bodyタグに対するスタイル(width: 600px !important;)のみうまく適用されません。
cssがカプセル化されてしまっており、component外にあるbodyタグに対してスタイルが適用できないことが原因と考えています。
よい解決策が浮かばず、ご意見を頂きたいです。

component

@Component({
  :
  styleUrls: ["./hoge.css"]
})
:

hoge.css

/* 印刷用CSSのimport */
@import url("./print.css") print;

print.css

/* 印刷用CSS */
body {
	width: 600px !important;
}

#header ul#link {
	display: none !important;
}

div.PrintArea {
	display: none !important;
}

解決のために実施したこと
印刷用cssをグローバルにすれば(styles.cssにhoge.cssの内容を追加する)、bodyタグにもスタイルが適用されました。
しかし、そうすると全ての印刷画面にcssが適用されてしまうため、避けたいです。

環境
Angular 8
TypeScript 3.4.5

#2

Componentからbodyタグに適用するスタイルを動的に変えたい と組み合わせればできそうです。styles.cssに

body.hoge {
  width: 600px !important;
}

と書いておいて、対象のコンポーネントのngOnInitでclassを付与すればいけそうです。
ただ、特定のコンポーネントの印刷用スタイルをグローバルなところに書いてしまうというのはきれいな解決法とは言えないですが。

#3

実現されていことにあっているかわかりませんが、
印刷用のメディアクエリはいかがでしょうか？

1 Like
#4

ukyoさん、d-okuさん
ご回答ありがとうございます。
お二方の方法を組み合わせることで、解決することができました！
ありがとうございました。

2 Likes