Q&A
HTML,CSSがないため誰も再現できないのでアドバイス難しいのですけど、数秒Waitさせる、もしくは初めからdisplay:noneにした場合はどうでしょうか
Webアプリで、htmlで表示したページをプリントアウトしています。
Javascript
1function Printout(){ 2 //非表示にしたい要素 3 $('.header,.footer,.sidebar,.print').hide(); 4 //印刷 5 window.print(); 6 //元に戻す 7 $('.header,.footer,.sidebar,.print').show(); 8} 9
Windowsで実行すると、想定通りに動いてくれるのですが、iPhoneのsafariで実行すると、非表示にしたい要素が消えてくれません。
なぜそのような現象が起こるのでしょうか？
どうすればiPhoneでも動くようになりますか？
教えて下さい。
ありがとうございます。
setTimeout()を使って、少し待ってからprint()してみましたが、ダメでした。
それから、
@media print{
.print{display:none}
}
とcssでやっていますが、効きません。
回答1件
0
ベストアンサー
現状、hide()してwindow.print()してshow()する
という流れになってますが、これは、
print()が、ダイアログが閉じるまでブロックする(つまりreturnしない)
と想定したものですよね?
しかしMDNによれば、最近のSafariでは、print()は非同期みたいですよ。
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint
なので、印刷ダイアログが表示される時点で、既にshow()まで実行されてしまってます(macのsafariでも再現します)。
また、show()すると、対象要素のstyle属性値にdisplay: blockなどが付くので、@media printも効かないみたいです。
hide()/show()せずに、@media printだけで制御すれば、うまくいくと思います。
あるいは、beforeprintとafterprintイベントを使ってhide()/show()しても良いかもしれません(未確認ですが)。
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeprint_event
投稿2021/05/13 00:32
総合スコア1323
ありがとうございました！
解決しました！
hide()/show() を消して、＠media print だけにしたら、うまく行きました。
なるほど、print()が非同期だったのですね。
あなたの回答
tips
プレビュー
