window.print（）は更新されたdivを表示していません

Question

この投稿は明らかにうまく表示されていませんでしたが、削除して再投稿するのではなく、編集してより明瞭にしました。

単純に言えば、他のすべてのdivが非表示になっている特定のdiv内でのみコンテンツを印刷できるようにするために、私のページにいくつかの要素があります。

ドキュメントがロードされた

<div id='print-me'> 
     <h1>Hello Plunker!</h1> 
</div> 

、私は変更しようとしている：私は以下のようにdiv要素を持っている

<style> 
    @media print { 
     body.printing * { display: none; } 
     body.printing #print-me { display: block; } 
    } 

    @media screen { 
     #print-me { display: none; } 
    } 
</style> 

体において：私は、以下のとおりのスタイルを定義する説明のポストを見つけましたprint-me部門の内容を以下のように変更し、この投稿に回答したeddie氏から親切に提供された情報を使用してください。印刷クラスが追加され、print-me divが印刷ウィンドウに表示されるように設定された状態で、他のすべての要素がドキュメントの本文から隠されます。

$(document).ready(function() { 
    $("body").addClass("printing"); 
    document.getElementById('print-me').innerHTML = '<p>crikey</p>'; 

    var htmlText = '<p>HTML TO PRINT</p>'; 

    $("#print-me").html(htmlText).promise().done(function() { 
      window.print(); 
    }); 
}); 

あなたは下のリンク

enter link description here

でPlunkerの例を表示した場合しかし、あなたは印刷ウィンドウが開きことを確認し、私は印刷に私を設定していたテキストますdivは表示されません。問題のコードは以下の通りになります。

$("body").addClass("printing"); 

    var htmlText = '<p>HTML TO PRINT</p>'; 

    $("#print-me").html(htmlText).promise().done(function() { 
      window.print(); 
    }); 

私がいることを変更した場合：その後、

$("body").addClass("printing"); 

    var htmlText = '<p>HTML TO PRINT</p>'; 

    $("#print-me").text(htmlText).promise().done(function() { 
      window.print(); 
    }); 

印刷画面で印刷-私はdiv要素や表示を更新しないこと。ただし、htmlTextは文字通り、htmlとして表示されません。

なぜ前者は表示されませんが、後者はプレーンテキストとして表示されます。

私が起こっているとどのように問題を解決するために、および/またはポストを改善する方法をされているものの任意のヘルプ/アドバイスをありがとうございました、これはより良い問題を説明したいと考えています。

Answer 1

これは私の作品です。

HTML

<div id='print-section'></div> 
<div id='print-btn'></div> 

CSS：プリント上で、あなたは印刷上の印刷div

@media print { 
    body * { 
     visibility: hidden; 
    } 

    @page {size: portrait} 

    #print-section { 
     visibility: visible; 
     width : 100%; 
     height : auto; 
    } 
} 

JS以外hiddenとしてすべてを設定する必要があります。ボタンで、あなたはにHTMLを待つべき動的コンテンツと電話を完全に追加しましたwindow.print();

$("#print-btn").click(function(){ 
    var htmlText = '<p>HTML TO PRINT</p>'; 

    $("#print-section").html(htmlText).promise().done(function() { 
      window.print(); 
    }); 
});