Chromeブラウザで印刷を実行した際、印刷プレビューが表示されない。

地図（GoogleMap）の後に画像を表示させたいページがあり、以下のように作った訳ですが、
印刷時に”プレビューを読み込んでます...”のままプレビューがいつまで経っても表示されません。

・Chromeのヴァージョンは83.0.4103.106です。
・Win,Mac問わずChromeブラウザでのみ起こっています。
・地図の段落と画像の段落を逆さまにすれば動きます。（仕様と異なってしまうのでこれは解決にはならないですが。）

何が悪いのか、デザイナーさんとかが見ればわかるのかなと思い投稿させていただきました。
ぜひご教授いただきたく。

※下記のコードをそのまま貼り付けてChromeブラウザで動かしてもらえれば再現できるかと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0">
6<meta http-equiv="X-UA-Compatible" content="ie=edge">
7<meta name="apple-mobile-web-app-capable" content="yes">
8<title>Example</title>
9<style>
10html, body {
11  font-family: "游ゴシック", YuGothic;
12  font-weight: 500;
13}
14h1 {
15  margin: 0;
16  font-size: 1.2rem;
17  display: block;
18  margin-block-start: 0.5em;
19  margin-block-end: 0.5em;
20  margin-inline-start: 0px;
21  margin-inline-end: 0px;
22  border-bottom: 1px solid #666;
23}
24h2 {
25  margin:6px 0 0;
26  font-size: 1.1rem;
27}
28table {
29  width:100%;
30  border-collapse: collapse;
31}
32th,td {
33  border: solid 1px #333;
34}
35th {
36  width: 200px;
37  min-width: 200px;
38  padding: 2.5px;
39  background: #f3f3f3;
40}
41td {
42  min-width: 300px;
43  padding: 2.5px;
44}
45iframe {
46  width:100%;
47  min-width:1024px;
48  height:37.5em;
49  border:none;
50}
51
52@media print {
53  .d-print-none{
54    display: none;
55  }
56  @page {
57    size: A3;
58  }
59}
60</style>
61</head>
62<body class="container-fluid">
63  <div>
64    <div>
65      <iframe src="https://maps.google.co.jp/maps?f=q&hl=ja&output=embed&z=18&q=東京都新宿区西新宿2丁目8-1">
66      </iframe>
67    </div>
68
69    <div style="page-break-after:always;">
70      <div>
71        <img src="https://placehold.jp/600x600.png" style="width:100%; height:auto; object-fit:cover;">
72      </div>
73    </div>
74  </div>
75  <hr>
76  <div class="form-group d-print-none text-center">
77    <button class="btn btn-outline-primary" type="button" onclick="window.print();">
78      <i class="fas fa-print"></i>
79      印刷
80    </button>
81    <button class="btn btn-outline-secondary" type="button" onclick="window.close();">
82      <i class="fas fa-times"></i>
83      閉じる
84    </button>
85  </div>
86</body>
87</html>
88

行動規範の内容に同意します

回答2件

自己解決

GoogleAPIキーを発行し、iframeを使わない方式で対応することにしました。

本件は最近出始めたChromium版Edgeにも同様の現象が起こります。
ちなみにChromium80での正常動作は確認しています。

Windowsに限っては印刷のショートカットキーで印刷プレビューのでないタイプの
ダイアログが現れますが、この場合は正常に出力できるようです。
故にプレビューに問題が孕んでいる。
プレビューでフリーズするというのはChromium系ブラウザの不具合かもしれません。

"送信先"を切り替えるという方法を提示していただきました。
確かにプレビューは出てくるのですが、何かしら内部で変換されているようで、
実際に出力すると意図しないレイアウトに書き換わることもあるということがわかりました。
また先にも記載していますが、ユーザーに自ら操作してくださいというわけにもいかないので
この案は見送ります。

投稿2020/07/16 01:27

tomomo

総合スコア430