1

新しいウィンドウ/タブを開き、ドキュメントに HTML を配置してから、ブラウザの印刷ダイアログを表示して、その新しいウィンドウを印刷したいと考えています。私はこれを達成するために以下を使用しています:

var w = window.open();
w.document.write(html);
w.document.close();

含まれる場所html:

...<body onload="window.print()">...</body>...

これはすべて機能し、ウィンドウがポップアップし、新しいページの印刷ダイアログが表示されますが、何らかの理由で、ブラウザーは印刷ダイアログを表示する前にページ上のすべての画像が読み込まれるのを待ちません。一部の画像が印刷されない原因となっています。

多くの画像があり、それらはサーバー側で動的に生成されます (それぞれの読み込みに約 1 秒かかります)。すべての画像がロードされた後にのみブラウザに印刷させるにはどうすればよいですか?

これは、私が確認した Chrome と Firefox で発生します。助けていただければ幸いです。

4

2 に答える 2

1

body.onloadイベントからイベントに変更してみてくださいwindow.onload。

w.window.onload = window.print()

またはそのようなもの。

于 2013-07-08T19:35:17.433 に答える
1

最後の画像の onload イベントにプリンター呼び出しを入れてみてください。

<img onload="window.print()" ... />

編集：

以下に示すように、OPによる完全な回答：

@chockleyc の回答をインスピレーションとして使用して、次のスクリプトを思いつきました。必ずしも順番に読み込まれるとは限らないため、最後の画像だけを使用することはできませんでした。次のスクリプトは、すべての画像が読み込まれた後にページを印刷します (jQuery を使用)。

var hasPrinted = false;
$(document).ready(function(){
  $('img').load(function(){
    var imgs = $('img');
    var loadedAll=true;
    for(var i=0;i<imgs.length;i++){
      loadedAll &= $(imgs[i])[0].complete;
    }
    if (loadedAll && !hasPrinted) {
      console.log('printing');
      hasPrinted = true;
      window.print();
    }
    else {
      console.log('not all images have loaded');
    }
  })
});
于 2013-07-08T19:36:19.197 に答える