react-to-printを使った非表示部分の印刷方法

目次

1.はじめに
2.開発環境
3.実装方法
4.参考

1.はじめに

「react-to-print」を用いて、印刷機能を実装しようとした際、
非表示にしているところを印刷時に表示して印刷しようとしたが、印刷ができませんでした。
実装方法を調べてもでてこなかったため記事にまとめてみました。

2.開発環境

• OS : Windows10
• React : v18.3.0
• Electron : v23.0.0
• react-to-print : v2.14.13

3.実装方法

印刷時に非表示にする方法

まず、react-to-printを使って印刷する時に非表示にしたいときはdisplay: noneを設定します。

@media print {
	#id{
		display: none !important;
	}
}

印刷時に非表示部分を表示させる方法

では、逆に非表示部分を印刷するときに表示させるのはどうしたら良いか？
参考にさせていただいたところによると、「overflow: hiddenを設定し、height: 0にする。」
と書いてあったのでdisplay: noneで非表示にしている部分を変えてみました。

@media print {
	#id{
		overflow: hidden !important,
		height: 0;
	}
}

あたりまえですが、印刷しても何も表示されませんでした。

ちょっと考えたらわかることなのでプログラムを修正した結果

<div
	id="id"
	ref={printRef}
	style={{
		overflow: 'hidden',
		hight: 0,
		textAlign: 'center',
	}}
>
	非表示だが印刷したい内容を書く
</div>

印刷時に表示状態にする。

@media print{
	#id{
		overflow: visible !important;
	}
}

非表示にする場合はstyleにdisplay: noneを設定していたが、overflow: hidden、height: 0に設定しても非表示になります。
印刷するときだけ@media printにoverflow: visibleに設定すると、非表示部分が印刷できるようになります。

印刷時にページを分ける方法

ちなみに印刷ページを強制的に分けたい場合はsectionで囲って、pageBreakAfter: alwaysを
設定すればページを分けられます。

<div
	id="id"
	ref={printRef}
	style={{
		overflow: 'hidden',
		hight: 0,
		textAlign: 'center',
	}}
>
	<section style{{pageBreakAfter: 'always'}}>
		1ページ目の非表示だが印刷したい内容を書く
	</section>
	<section style{{pageBreakAfter: 'always'}}>
		2ページ目の非表示だが印刷したい内容を書く
	</section>
</div>

以上非表示部分を印刷する方法でした。

4.参考