【Jｓ】特定の部分を印刷させるには?

Question

<form>
    <input type="button" value="このページを印刷" onclick="window.print();" />
 </form>

これで、ボタンを押せばページ全体が印刷されますが、ボタンを押したとき特定の部分だけを印刷できるようにするにはどうすればいいですか?

Answer 1

こんな感じでいかがでしょう？

@media print{
  body :not(.print) {
    display:none;
  }
}

<div id="div_1">
1番目
</div>
<input type="button" value="1番目を印刷">
<div id="div_2">
2番目
</div>
<input type="button" value="2番目を印刷">
<div id="div_3">
3番目
</div>
<input type="button" value="3番目を印刷">

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(elm){
  elm.addEventListener('click',function(e){
    this.previousElementSibling.classList.add('print');
    window.print();
    this.previousElementSibling.classList.remove('print');
  })
});

https://jsfiddle.net/qeq0sy13/

Firefoxでしかテストしてないです（紙がもったいないので←）

Comments

[think49]

本題ではないですけど、印刷プレビューを使えば紙を無駄に消費しなくて済んだのではと…。

[miyabi-sun]

Chromeのデベロッパーツールにはスマホモードならぬ、印刷CSSモードなんてものもありますね。
印刷するとPDFファイルを出力するようなプリンタードライバーもありますし…

[Lhankor_Mhy]

ええ、まあ、あの、軽いジョークのつもりだったのです。
https://words.nanapi.com/ja/87593

Answer 2

window.print()は印刷用のダイアログボックスを表示して、
「後は知らね、勝手にやってね」という命令です。

もしWikipediaのように、
印刷時のみ邪魔なヘッダーやサイドバーを取り除ければ良いのであれば、印刷用CSSを使えば一撃解決です。
「css メディアクエリ 印刷」でぐぐってみてください。

もし一つの大きな記事の中に何個もセクションがあって…
印刷ボタンを押す度にその場所だけ印刷するような用途の場合、かなり難しいです。

印刷用CSSに強制改行という概念がありますので、
ページを区切って欲しいページに絞って印刷してもらうとか、
該当のセクションだけ表示した別ページを表示して印刷してもらう等の手法が必要になるかと思います。