1

私はfirefox 16.0.2を使用しています。インポートしたファイルで定義された css ルールを使用して div コンテンツを印刷したいと考えています。Chrome で印刷しようとすると正常に動作しますが、Firefox では、印刷されたページに CSS がフォーマットされていません。

<html>
    <head>
        import css here
    </head>
    <body>
        <div id="printable"></div>
    </body>
</html>

JavaScript を使用して div id=printable を印刷すると、紙の結果には CSS ルールのない HTML コンテンツのみが含まれ、画面上の結果は完璧になります。すべての css が定義された状態で Firefox を印刷する方法はありますか?

以下の追加は、divを印刷するための私のjavascriptです

function print(id) 
{
    var mywindow = window.open('', id, 'height=600,width=800');
    var data = document.getElementById(id).innerHTML;
    mywindow.document.write('<html><head><title>Print</title>');
    mywindow.document.write('<link rel="stylesheet" href="../../lib/css/report/main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    mywindow.print();
    mywindow.close();

    return true;
}

main.css で @media print {#printable.....} を使用しようとしましたが、うまくいきません。Javascript で media="print" を link タグのように配置しようとしましたが、印刷プレビューにはまだ効果がありません。

4

4 に答える 4

4

代わりに、印刷固有のメディア クエリを使用しないのはなぜですか?

@media print {
   #printable {
     /*Print style goes here*/
   }
}
于 2012-11-19T17:22:40.040 に答える
2

スクリプトは HTML を書き出してスタイルシートの読み込みを開始し、スタイルprint()シートが実際に読み込まれるのを待たずに呼び出します。print()そのロード イベントが発生するまで呼び出したくない場合<link>があります。

于 2012-11-22T08:13:10.873 に答える
0

または... divに media="print" を追加してみてください

次のようにしてください：

<html>
    <head>
        import css here
    </head>
    <body>
        <div id="printable" media="print"></div>
    </body>
</html>
于 2012-11-19T17:26:17.740 に答える
0

Boris Zbarsky に触発され、さらに多くのグーグル検索を行った後、次のように動作するようになりました。

最初にprint.htmlというスタブ HTML ファイルを作成します。

<!doctype html>
<html lang='en-us'>
<head>
<meta charset='utf-8'>
<!-- the print.css link doesn't need to be of media type 'print' -->
<link rel='stylesheet' type='text/css' href='print.css'>
</head>
<body>
  <div id='print_this'>
    <!-- All the 'printable' stuff will be inserted here -->
  </div>
</body>
</html>

次に、印刷元の html ドキュメントでjQueryを使用して、ウィンドウ オブジェクト (以下ではprint_windowと呼びます) を作成し、それをHTML スタブ ファイルと共にロードします。次に、印刷するすべての HTML を収集して、print_windowオブジェクトに詰め込みます。次に、window オブジェクトを出力します。

// ============= jQuery ===============
function divPrint() 
{
    var print_window = window.open('print.html');  // Loads the HTML stub file
    // Do this in an onLoad event to make sure, before printing, CSS and all else
    // is loaded and ready -- else you'll likely get a blank page.
    print_window.onload = function () {
        // Create an array, containing the print_window object, that will be passed to the each() method.
        var pw = [this];
        // Find each element of class printable and grab its inner HTML and insert it into
        // the stub's 'print_this' block.
        $('.printable').each(function(index) {
            pw[0].document.getElementById('print_this').insertAdjacentHTML('beforeend', $(this).html());
        }, pw);

        // Print the print_window which is now embellished with all the stuff that was tagged as printable.
        this.print();
        this.close();
    }
}


$(document).ready(function() {
    $('#btnPrint').click(function(){
        divPrint();
    });
});

そして、上記の jQuery コードが処理する可能性のあるものの例を次に示します (これも同じファイルにあります)。

<!-- Note that the button doesn't get printed because it is not of class 'printable' -->
<button type='button' id='btnPrint'>Print Page</button>
<div id='stuff_not_to_print'>
  <h1>Your mother wears army boots!</h1>
</div>
<div class='printable'>
  <p>Your mother is a swell lady who's pretty, too!</p>
</div>
<div class='printable'>
  <p>Yer dad's pretty cool, too!</p>
</div>
<div>
  <p>This won't print!</p>
</div>

次に、上記の HTML をすべて見栄えよくフォーマットする場合は、HTML スタブ ファイルprint.htmlがロードできるprint.cssというCSSファイルを作成します。

于 2016-07-09T20:55:51.053 に答える