2

Chrome 24

私は現在、奇妙な機能を備えたサイトの書き直しに取り組んでいます。印刷する画像を選択するためのオプションのリストがユーザーに表示されるページがあります。

ユーザーは、必要な画像のチェックボックスをオフにしてから、サーバーにコールバックするボタンをクリックし、指定された画像に対して、必要なHTMLを非表示のDIVに挿入します。

さらに複雑なことに、画像のsrc属性は、実際には.NET MVCサーバー側のアクションへのリンクであり、データベースから画像を取得し、画像を取得して、画像のいくつかの異なる場所にテキストをレンダリングします。

出力HTMLは次のようになります。

<div style="visibility: hidden;">
    <div id="PrintArea">
         <div><img width="1000" src="/Controller/GetImage/2"></div>
        <div><img width="1000" src="/Controller/GetImage/3"></div>
        <div><img width="1000" src="/Controller/GetImage/5"></div>
    </div>    
</div>

これがjavascriptのステップ1であり、ajaxがサーバーにコールバックして、このPrintAreaDIVにデータを入力します。この後、次のことを行います。

//Print
$('#PrintArea').waitForImages(function () {
    $("#PrintArea").jqprint({ importCSS: true });
    //$.unblockUI();
});

サーバー側で画像を読み込むことに対応するために、waitForImages jqueryプラグインを使用してから、jqprintを使用してコンテンツを印刷します。

方程式を完成させるために、印刷スタイルシートがあります（メインのスタイルシートはmedia = "screen"であるため、これが唯一のスタイルシートである必要があります）。

body * {
    visibility:hidden;
  }

#PrintArea, #PrintArea * { visibility: visible; }

#PrintArea { position: absolute;left: 0;top: 0; }

img { display: block !important; }

これはFirefoxとIEで正常に機能します。

Chromeは一貫して機能しません。3つの画像を選択すると、最初の2つが表示されますが、2ページ目に表示されるはずの3つ目が表示および印刷される場合と、そうでない場合があります。それは散発的でかなりランダムに見えます。

提案やアイデア、またはChromeでページ分割全体で画像を一貫して印刷する方法はありますか？ここでの内部的な考え方は、waitForImages呼び出しが終了する前に、Chromeの印刷プレビューウィンドウが実際にレンダリングされていたため、コンテンツが表示されなかったというものでしたが、これをテストする具体的な方法は思いつきませんでした。

ありがとう

4

1 に答える 1

1

多分ウィンドウロードを試してください：

$(window).load(function() {
    // executes when complete page is fully loaded, including all frames, objects and images
    $('#PrintArea').waitForImages(function () {
        $("#PrintArea").jqprint({ importCSS: true });
        //$.unblockUI();
    });
});

ウィンドウ読み込みイベントは、すべてのフレーム、オブジェクト、および画像を含む完全なページが完全に読み込まれる少し後に実行されます。したがって、画像やその他のページ コンテンツに関係する関数は、ウィンドウの load イベントまたは content タグ自体に配置する必要があります。

ソース: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

クロムの問題について: http://forum.jquery.com/topic/document-ready-and-window-onload-difference

それが役に立てば幸い ！

于 2013-01-22T22:13:19.883 に答える