印刷JavaScriptを使用して本部とスタイルを保持

Question

私はjQueryを使って、このJavaScriptを使用して自分のアプリケーション内の特定のdivを印刷しようとしている：

function PrintContent() 
{ 
w=window.open(); 
w.document.write($('#diary').html()); 
w.print(); 
w.close(); 
} 

それは新しいタブでのdivを開き、印刷オプションパネルが開きますCSSスタイルは失われます。私はprint.cssをmedia = "print"に設定しましたが、このファイルを新しいタブにロードしていないことは明らかです。つまり、CSSがある場所ではなくdivを読み込んでいるだけです。

どのように私はこれを修正できますか？私のjavascriptはそれほど強くない。

ありがとうございます！

Answer 1

は、代わりにこのラインを使用してみてください：

w.document.write('<div id="diary">' + $('#diary').html() + '</div>'); 

あなたはdiv要素ではなく、実際のdivタグの内部HTMLを書いています。

上記の方法でも、divタグに正しいidが書き込まれます。あなたがdivではなくdiv#diaryをフォーマットしている可能性があるので、私はそこにIDを入れただけです。

EDIT

この方法では、スタイリングを維持する必要があります。

function PrintContent() 
{ 
    var e = document.createElement('div'); 
    e.id = 'diary'; 
    e.innerHTML = $('#diary').html(); 
    document.getElementById('t').appendChild(e); 
} 

あなたはただこのコンテンツは、そのようなtのIDを持つdivとして、挿入することができる場所を確認する必要があります。私がコメントに載せた例のように。

Answer 2

のdocument.writeは悪い習慣ですので：私は、印刷中にそれが適用できるようにするためにDIV内で参照stlyesheetを持っている

https://github.com/jasonday/printThis