インターネットエクスプローラでHTMLページを印刷する

私はそのスタイルでテーブルを印刷しなければなりません jQuery.copyCSSを使ってCSSを複製し、別の要素にスタイルを付けます。（IE 8でテストしているようです。それは私が別のページにテーブルを「送信」し、そこから印刷を呼び出すに思っwindow.printを呼び出し/クリックした後に（）） https://github.com/moagrius/copycss インターネットエクスプローラでHTMLページを印刷する

をCSSを保存しません。

したがって、私はそれがどのようなスタイル

を含むだけでなく、HTMLを解析します.HTML渡し、そう

$("#table_report").clone().attr({"id":"table_report_clone", "name":"clone"}).appendTo("body"); // doesn't matter if it appears on the page, I will just pass these one 

    $('#table_report_clone').copyCSS('#table_report'); // copy CSS from original to clone 

    var clone = $("#table_report_clone").html(); 

    var w = window.open(); 
    $(w.document.body).html(clone); //table_report should be the table with its style 
    w.document.close();

（2ページ目に合格するために）別の要素にCSSのクローンを作成する必要があります私がする？

EDIT 1： 現在、いくつかのアイコンが表displayed..howeverであることは、本当に '生の' w.document.write（クローン）です。 // $（w.document.body）.html（clone）の代わりに。

EDIT 2：

は@Roljhon

これはFF、クロム、しかし でIE 8ハズレの作業を行い

エン事実によっていくつかのヒントを追加することに変更しました。。今では動作します：は（とにかく、私はjQueryの1.5.1を使用しています）

dumpCSSTextは、私が取得する必要があるため/

 $("#table_report").inlineStyler(); 
     var table_report = document.getElementById("table_report"); 

     var w = window.open(); 
     var css = "" + dumpCSSText(table_report) //css of your table_content 

     var style = document.createElement('style'); 

     style.type = "text/css"; 
     style.appendChild(document.createTextNode(css)); 

     w.document.head.appendChild(style); 
     w.document.body.innerHTML = document.getElementById("table_report").innerHTML

はEDIT 3属性のスタイルに参加 https://stackoverflow.com/a/15011387/7370271 から関数であります

var table_report = $（ "＃table_report"）。html（）;

 var w = window.open(); 
     w.document.write('<html><head><link rel="stylesheet" href="/i/css/apex.min.css?v=4.2.6.00.03" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie.min.css?v=4.2.6.00.03" type="text/css"/><![endif]--><link rel="stylesheet" href="/i/libraries/jquery-ui/1.8.22/themes/base/jquery-ui.min.css" type="text/css" /></head><body>'); 

     $(w.document.body).html(table_report); 

     w.document.write('</body></html>'); 
     w.document.close(); 
     w.focus(); 
     w.print(); 
     w.close();

最後に、私は90％になりましたよ...唯一の問題は、IE8におけるCSS ...は

は、私はあなたの問題へのソリューションを作成しようとした

出典

2017-01-19 Michael Johnks

ありがとうであり、これはおそらく解決することができそれはあなたのテーブルのCSSを渡すために何をすべきかのアイデアを与えます。あなたはあなたのJavaScriptから直接stylesheet.Createにそれをリンクを作成することができ

オプション1

。しかし、スタイルシートの内容がのtable_contentの正確なCSSであることを確認し、これを新しいウィンドウのheadセクションに追加すると同時に、テーブルを新しいウィンドウの本文部分に書き込みます。あなたがJavaScriptと上記と同じことをやってから直接だけでなくスタイルシートを作成することができ

var link = document.createElement('link'); 
link.rel = "stylesheet"; 
link.href ="table_content_style.css"; // this will have your table_content_clone CSS 

w.document.head.appendChild(link); 
w.document.body.innerHTML = "<h1>test</h1>"; // your html table markup

オプション2

。

var css = "body{background-color: red;}"; //css of your table_content 
var style = document.createElement('style'); 
style.type="text/css"; 
style.appendChild(document.createTextNode(css)); 

w.document.head.appendChild(style); 
w.document.body.innerHTML = "<h1>test</h1>"; // your html table markup

私は役立つことを望みます。フィドルを参照してください：https://jsfiddle.net/0vzwzrpq/

出典

2017-01-19 11:48:44 Roljhon

はそれが私はスタイル属性を取得するための関数を使用していますIE 8いやにFF、Chrome..butに取り組んでいます、ありがとう要素から.. .inlineStyler（）https://github.com/davecranwell/inline-stylerから私はすべてのインラインを置くのに役立ちます –

助けてくれてありがとう、私はほとんど行われています –

ねえ、私は私に挑戦しました最高ですが、これはIEセキュリティ機能であり、DOMノードを別のドキュメントに移動することはできません。しかし、私は回避策を見つけようとします。この種の問題は私にはたくさんあります。 – Roljhon

印刷するスタイル要素の最適なアプローチは、CSSメディアクエリを使用することです。

@media print { 
    body { 
     background-color: pink; 
    } 
}

主題について、ここで非常に良い記事があります：https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

出典

2017-01-19 12:02:09 bini

私はメディアクエリをサポートしないIE 8でテストしてください。 css3-mediaqueries-jsを使用していません。 –

では、代わりにインラインスタイルのルールを使用しています。 IE8エミュレーションでは自動マージンルールが認識されません。次に、jqueryを使用してテーブルをクローンすることができます（インラインスタイルのルール）を印刷プレビューウィンドウに表示します。 –

インターネットエクスプローラでHTMLページを印刷する

答えて

関連する問題