特定の要素をクリックしたときに印刷用のcssとhtmlを適用したい

Question

たとえば「印刷する」ボタンをクリックすると、
ページ全体ではなく特定の画像とテキストだけが印刷プレビューに表示される

上記のような処理をhtml・css・jQueryなどを使って作りたいです。
以下のような、印刷時にだけcssが適用できる方法があるのを知ったのですが、

<link media="print" rel="stylesheet" href="print.css">

これだと「印刷する」ボタンを押していないときの右クリックの印刷などでも印刷用cssが有効になってしまいました。また、印刷したいコンテンツ以外も含まれてしまっています。

ボタンを押したときだけ、一部のコンテンツを印刷プレビューに出したいのですが、どういった感じでつくればよいでしょうか？

Answer 1

beforeprint / afterprint があります。
https://developer.mozilla.org/en-US/docs/Web/Events/beforeprint
https://developer.mozilla.org/en-US/docs/Web/Events/afterprint

$(window).on('beforeprint', function(event) {
  // 処理。
});

cf. http://stackoverflow.com/questions/1234008/detecting-browser-print-event

// beforeprint for Webkit/Blink.
(function() {
  if (window.matchMedia && 'undefined' === typeof window.onbeforeprint) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
      if (mql.matches) {
        $(window).trigger('beforeprint');
      } else {
        $(window).trigger('afterprint');
      }
    });
  }
})();

Comments

[x_x]

ちょっと端折りすぎましたかね。
ボタンを押したときにbodyにclassでもつけて、afterprint時に削除するようにすればいいかと思います。

[xyunow]

ありがとうございます。
今回は一旦jqueryでiframeを作って、その中に印刷したい画像をテキストをセットすることにしました。
時間があるときにじっくり読んで理解したいと思います。

Answer 2

もしかしたら私の理解が質問者さんのやりたいこととずれているかもしれませんが、
ヒント程度に読んでもらえればと思います。

---

linkについてもdisabledを適用すれば無効にできたりします。

以下、簡易に作ったテストコードです。
※その場で試せるようにmedia指定を外しています。

<link rel="stylesheet" href="print.css" id="printcss">
<link rel="stylesheet" href="display.css" id="displaycss" disabled>

<div>test</div>
<button type="button" id="print">印刷用</button>
<button type="button" id="display">表示用</button>

print.css

div{
	font-size:200px;
}

display.css

div{
	font-size:10px;
}

$(function(){
	$("#print").on("click",function(){
		$("#printcss").prop("disabled", false);
		$("#displaycss").prop("disabled", true);
	})
	$("#display").on("click",function(){
		$("#printcss").prop("disabled", true);
		$("#displaycss").prop("disabled", false);
	})

})

上記のようにボタンで切り替えても良いと思いますが、
それならいっそのこと、「印刷する」ボタンで別ウィンドウオープンし、
専用のページを開くようにした方が楽かもしれませんね。

Comments

[xyunow]

ありがとうございます。
今回は一旦jqueryでiframeを作って、その中に印刷したい画像をテキストをセットすることにしました。
ボタン切り替えの方法も覚えておきたいと思います。リンクもdisabled指定できるんですね。