2

問題は、新しいコンテンツが印刷されないことです (さらにいくつかの要素)。

ユーザーが印刷リンクをクリックすると、window.print() が呼び出される前にドキュメントに html を追加します。

私は ajax を使用して、印刷する前に本のより多くの章をフェッチします。

コード：

印刷が初期化されました:

var afterPrint = function () {

  var timer = setInterval(function () {

    afterContentPrint(); // Cleanup html (restore to initial state)
    clearInterval(timer);

  }, 900);
}
//window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

イベント印刷クリック:

$("#print-test").click(function (e) {

   e.preventDefault();

   beforeContentPrint(); // ajax call for additional content, finishing by calling window.print()
});

関数 beforeContentPrint() 内:

var jqxhr = $.ajax({

   type: "GET",
   url: bookURL,

   success: function(data) {
     .....
     .....

     $(article).each(function () {
        parent.append(article);

     });
   },
   complete: function() {
     var timer = setInterval(function () {
        window.print();
     }, 900);
  }
 }

新しいコンテンツが HTML ドキュメントに視覚的に追加されているため、機能するはずです。ただし、最初のコンテンツ (ajax 呼び出しの前) のみが印刷用に選択されます。

このソリューションは、IE および Firefox (onbeforeprint および onafterprint) 用です。

window.matchMedia('print') を使用すると、このロジックを使用して Chrome で正常に動作するようです。

4

4 に答える 4

1

なぜこれが起こっているのかわかりませんが、mozilla ドキュメントに回避策があります。非表示の iframe を印刷すると、表示される必要がなく、本のより多くの章が開きます。ここにリンクhttps://developer.mozilla.org/en-US/docs/Printing

ここにコード：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
function closePrint () {
  document.body.removeChild(this.__container__);
}

function setPrint () {
  this.contentWindow.__container__ = this;
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.print();
}

function printPage (sURL) {
  var oHiddFrame = document.createElement("iframe");
  oHiddFrame.onload = setPrint;
  oHiddFrame.style.visibility = "hidden";
  oHiddFrame.style.position = "fixed";
  oHiddFrame.style.right = "0";
  oHiddFrame.style.bottom = "0";
  oHiddFrame.src = sURL;
  document.body.appendChild(oHiddFrame);
}
</script>
</head>

<body>
  <p><span onclick="printPage('externalPage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">Print external page!</span></p>
</body>
</html>
于 2013-09-03T11:48:06.040 に答える
0

setInterval のように見えますが、clearInterval があなたを台無しにしているものです。setTimeout に変更し、afterprint 関数で clearInterval を取り除きます。FF と IE9 で動作するフィドルを作成しました。フィドル

    complete: function() {
        var timer = setTimeout(function () {
        window.print();
      }, 900);
    }
于 2013-08-29T21:33:59.317 に答える
0

追加された要素が表示されていないため、正確な問題を特定するのは少し難しい場合がありますが、ドキュメントへの追加/挿入による要素の追加は、すべてのブラウザーで常にうまく機能するとは限りません。最悪の場合、それらの要素を追加する必要があります。コード ( など) によって手動document.createElement()でappendChild()。

回避策を作成するMutationObserversために、記事要素の変更を追跡するために使用することができます。これは、DOM が適切に更新されたときに印刷をトリガーするのに役立つことを願っています。サポートは新しいブラウザーではかなり良好です (一部のブラウザーではプレフィックスを使用する必要がある場合があります f.ex. WebKitMutationObserver)。古いブラウザーでは、フォールバックを提供できます。

これにより、ターゲット要素の変更が監視され、コールバックが発生します。

この記事に基づく一般的な例:

var article = document.querySelector('#articleID'),
    doPrint = false,    // must be available in global/parent scope
    o,
    useFallback = (typeof MutationObserver !== 'undefined');


if (!useFallback) {    
    o = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

           // you can do additional filtering here
           // using the mutation object (.name, .type, ...)

           if (doPrint) {
               doPrint = false;
               window.print();
           }
       });
    });

    var cfg = { attributes: true, childList: true, characterData: true };

    o.observe(article, cfg);
}

オブザーバーが実行されているので、成功のコールバックで次の変更を行うことができます。

var timer;  // keep track of setTimeout so we can cancel it

success: function(data) {
   ...
   ...

$(article).each(function () {

    parent.append(article);

  });

  // after last element is added, add a "dummy" element
  doPrint = true;

  if (useFallback) {
     // fallback to setTimeout or other solution
  }
  else {
     parent.append('<br />');
  }

}

ここで、オブザーバーをセットアップしていくつかの要素を追加するオンライン デモを作成しました。コンソールを開いてアクションを表示します。デモは、状況をシミュレートするにはおそらくデータが限定されすぎていますが、プロセスを確認するのに役立ちます。

印刷ダイアログ自体をトリガーするためにここで使用されているメカニズムが最適かどうかを説明できます。例として 1 つだけ示します。

しかし、何かが に追加されると、オブザーバーがトリガーされることがわかりますarticle。このようにして、DOM が更新され、印刷できるようになっていることがわかります。最後に追加された要素のみが印刷をトリガーする必要があるため、doPrintフラグが必要です。

それでも成功しない場合は、コードの方法で要素を手動で追加することを検討するか、必要に応じて挿入するいくつかの要素を事前に定義する必要があります (前述のように、ここで完全なシナリオを知らなくても推測する必要があります)。

于 2013-09-07T05:39:12.067 に答える