Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
参照サイト）
https://www.tsukimi.net/jquery_specific-range_printing.html
参照サイトの2つめ「特定の範囲だけを印刷する」を実装し、
参照サイトと同じように「ブラウザのメニューの印刷」では全ての範囲で印刷をしたいのですが上手くいきません。
参照サイトでは「このページを印刷する」ボタンでは、特定の範囲だけで印刷定され、
ブラウザのメニューの印刷では全ての範囲で印刷されます。
しかし自身で試したところ、「このページを印刷する」ボタンと「ブラウザのメニューの印刷」のどちらも
「特定の範囲（下記サンプルのmainのみ）だけを印刷」になってしまいます。
以下サンプルソースです
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <style type="text/css"> @media print{ .print{display:none;} } </style> <style type="text/css"> header{ height: 200px; background-color: red; } main{ height: 200px; background-color: green; } footer{ height: 200px; background-color: blue; } </style> <script type="text/javascript"> $(function(){ //非表示にしたい要素 var hide_elm = $('.header,.footer,.sidebar'); //ボタンをクリック $('button').click(function(){ //非表示 hide_elm.addClass('print'); //印刷 window.print(); //元に戻す hide_elm.removeClass('print'); }); }); </script> </head> <body> <header class="print"></header> <main class="main"></main> <button onclick="window.print();">このページを印刷する</button> <footer class="print"></footer> </body> </html>
あとaddClassしてprintとさせようとしていますが、提示されたHTMLにはすでにprintがついています
どういう意図でしょうか？
> 参照サイトと同じように「ブラウザのメニューの印刷」では全ての範囲で印刷をしたい
正しい状況を説明できていません。
参考サイトを確認すると、「このページを印刷する」ボタンと「ブラウザのメニューの印刷」のどちらも、「特定の範囲を印刷」（サイドメニューを印刷しないスタイルの印刷プレビュー）になります。
やりたいことは 、明解な１文を加えておくと回答もつきやすいと思います。
合っているか分かりませんが私なりの解釈：
『JavaScriptで制御する「このページを印刷する」ボタン』と『ブラウザ標準の印刷メニュー』とで異なる印刷内容にしたい。
回答2件
0
ベストアンサー
特定の範囲だけを印刷する。但し「ブラウザのメニューの印刷」では全ての範囲で。
前提：私の解釈（『JavaScriptで制御する「このページを印刷する」ボタン』と『ブラウザ標準の印刷メニュー』とで異なる印刷内容にしたい。）での回答です
しかし自身で試したところ(略)
ブラウザの挙動は詳細に確認してください。
印刷プレビュー画面を閉じると、もう一度、印刷プレビュー画面が開くはずです。
- HTML 内の
onclick属性に指定されたwindow.print()が実行される。 - jQueryのイベントリスナ内で
window.print()が実行される。
イベントリスナ内で印刷制御する場合、<button>の onclick 属性に記述する必要はありません。
スタイル(CSS)
※参考にされているサイトもそうですが、印刷しない内容にprintというclass名を与えると印刷対象であると誤解されかねません。
class名も誤解されない命名とするのがセマンティクスへの配慮となります。
html
1<!DOCTYPE html> 2<html> 3<head> 4<style> 5@media print{ 6 .invisible {display:none;} 7} 8header{height: 200px;background-color: red;} 9main{height: 200px;background-color: green;} 10footer{height: 200px;background-color: blue;} 11</style> 12 13<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 14<script> 15$(function(){ 16 17 var $noprn = $("header,footer"); // jQueryで制御する対象 18 19 $('button').click(function(){ 20 $noprn.addClass('invisible'); // 非表示のスタイルを適用 21 window.print(); // 印刷（ブラウザの印刷メニューと同じ動作になる） 22 $noprn.removeClass('invisible'); // 非表示のスタイルを元に戻す 23 }); 24 25}); 26</script> 27</head> 28<body> 29 <header></header> 30 <main></main> 31 <button>このページを印刷する</button> 32 <footer></footer> 33</body> 34</html>
投稿2020/10/16 06:37
総合スコア5432
0
HTML
1<!-- 2<header class="print"></header> 3--> 4<header></header>
はじめから印刷用のクラス指定していたらそうなりますよね？
投稿2020/10/05 07:46
総合スコア2506
あなたの回答
tips
プレビュー
