特定エリアのみ印刷したい

Question

現在印刷ボタンの実装をしています。
ボタンをクリックすると印刷プレビュー画面が開き、対象の部分を印刷できるというものです。

質問があるのですが
結論から言うと
特定エリアのみ印刷するにはどうしたらいいでしょうか？

というのも今javascriptを利用して「window.print();」で印刷機能を実装しています。
しかしこれだと画面全体になります。

調べているとプラグインを使った実装方法もあるのですが、そうするとマネージャーとの相談が発生するため
できれば標準のjavascript(jQuery)のみで実装したいです。
プラグインを使った方法の一例

以下リンクはプラグインなしで実装できたのですが、印刷プレビュー時に画面の描画が崩れるので惜しかったです。
https://www.tam-tam.co.jp/tipsnote/javascript/post7977.html

何かいい方法を知っている方がいらっしゃったら教えていただきたいと思います。

Answer 1

この間までやってた案件で同じようなものがあったばかり。

サンプルで指定されているサイト、後の方と同じですが、説明が少ないので、
印刷画面不要！指定範囲のみ印刷できるjQueryプラグイン「jPrintArea.js」
を参考にすれば分かり易いと思います。

で、崩れるっていうのは、おそらく、上記サイトの「印刷部分のスタイルシート調整」
というところが関係していると思うので、私の場合、印刷ボタンは特定ページのみ
だったので、「print.css」を新規に作成して、素のタグにCSSを当てて解決です。

@media print {
  table {}
  thead th {}
  tbody th {}
  td {}
  td h3 {}
  td p {}
  strong {}
  a {}
}

こんな感じで、囲んでいるdivやsectionのIDやClassは入れないで書きます。
もちろん、内部にClassが当たっている場合は、.classname {}を追記すれば大丈夫です。

Comments

[k499778]

回答ありがとうございます。確認してみます！