8

私は Web 開発者であり、デザインを扱うことはほとんどありませんが、修正に苦労しているこのバグが発生しました。

印刷プレビュー ページを印刷または表示すると正しく表示される画像と、正しく表示されない画像があります。私が見ることができる主な違いは、表示されない画像は css で適用された画像を含むスパンタグであり、作業中の画像は img タグを使用することです。

html の例を次に示します。

「アイコン」誕生のスパンは表示されません:

<li class="media">
    <div class="img">
        <div class="h2 mtm">1889</div>
        <span class="timeline-icon icon-birth"></span>
    </div>
    <div class="bd">
        <h3 class="profile-subtitle mts">Born in ?</h3>
        <p class="deemphasis mbn">
        <a href="/search/results/bmdindexedbirths/bibby/elizabeth%20?yearofbirth=1889">Search     for Birth Record</a>
        </p>
    </div>
</li>

Image.gifは次のように表示されます。

<li class="media">
    <div class="img">
        <div class="h6">
            <strong>Spouse</strong></div>
            <img src="image.gif" alt="" class="person-thumb dropshadow" />
        </div>
    <div class="bd">
        <p class="mbn">Husband</p>
        <h3 class="profile-subtitle">
            <a href="path">Thomas&nbsp;<strong>Name</strong></a>
        </h3>
        <p class="mbn">?&#45;?</p>
    </div>
</li>

一部のブラウザでは、プレビューでは問題ないように見えますが、印刷されません。他のブラウザでは、印刷されず、まだ印刷されません。

前もって感謝します！

4

4 に答える 4

9

私は2か月以上前に同じ問題を抱えていました。ユーザーを印刷に適したページにリダイレクトするボタンがあり、Javascript を使用して印刷ダイアログをトリガーしました。

問題は、CSS バックグラウンドで指定された画像がダウンロードされるまでブラウザが待機しないことでした。

印刷ダイアログをトリガーする前にタイムアウトを設定して、ブラウザーに画像をダウンロードする時間を与えます。このアプローチは信頼性が低く、インターネット接続が非常に遅いユーザーに画像がダウンロードされる前に、ダウンロード速度が一定ではないため、印刷ダイアログが表示されます。

最後に、HTMLimgタグを使用してページに画像を埋め込み、jQuery を使用して、最後の画像がダウンロードされたときに印刷ダイアログをトリガーしました。

于 2012-09-21T14:38:35.123 に答える
6

印刷する前に遅延を置く必要があります。クロムにはネイティブのバグがあります。コードは次のようになります:-

function PrintDiv(data) {
    var mywindow = window.open();
    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);

   if (is_chrome) {
     setTimeout(function() { // wait until all resources loaded 
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print(); // change window to winPrint
        mywindow.close(); // change window to winPrint
     }, 250);
   } else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
   }

    return true;
}
于 2015-10-30T05:43:09.020 に答える
0

印刷スタイルシートを作成し、スパンを display:block に設定します

于 2012-09-21T15:11:50.203 に答える