web-dev-qa-db-ja.com

CSSを適用したdivコンテンツの印刷

私はプロジェクトに取り組んでおり、divコンテンツを印刷したいのですが、使用しているコードは要件を満たしていますが、Cssを適用せずに簡単な出力を得ていますが、画像も取得できません。助けてください。取得しているコードと出力、および必要な出力。

コード：

function PrintElem(elem) {
    Popup($(elem).html());
}

function Popup(data) {
    var mywindow = window.open('', 'new div', 'height=400,width=600');
    mywindow.document.write('<html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

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

    return true;
}

印刷ボタンをクリックする前に取得している出力： enter image description here

印刷ボタンをクリックして得られる出力： enter image description here

javascriptasp.netcss
16
rupinder18

Cssプロパティmediaをprintに変更する必要があります。 cssをアタッチした以下のように、関数createPopup（）に新しい行を追加します。

mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );
9
Girish Vadhel

CSSをレンダリングしたい場合は、印刷する前にタイムアウトを追加する必要があります。CSSがHTMLに適用されるまで時間がかかり、印刷できるようになるためです。

これを試して：

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}
8
Obaid

私の提案は、<body>_タグにjavascriptを追加して、印刷と終了を行うことです。

<body onload="window.print();window.close()">

これを行うと、印刷ウィンドウが開く前にドキュメントとCSSを読み込むのに十分な時間を常に確保し、印刷ダイアログが閉じた直後にウィンドウを閉じます。

3
jamesjansson

画像をサイトの背景画像として使用している場合は、絶対に取得できませんが、印刷ブラウザーではすべての背景画像が無効になります。

代わりにimgタグを使用してみてください。また、ブラウザで画像を無効にするオプションがチェックされていないことを確認してください。

1
Pradip Bhagat
       function printpage() {
           var getpanel = document.getElementById("<%= Panel1.ClientID%>");
           var MainWindow = window.open('', '', 'height=500,width=800');
           MainWindow.document.write('<html><head><title></title>');
           MainWindow.document.write("<link rel=\"stylesheet\" href=\"styles/Print.css\" type=\"text/css\"/>");
           MainWindow.document.write('</head><body onload="window.print();window.close()">');
           MainWindow.document.write(getpanel.innerHTML);
           MainWindow.document.write('</body></html>');
           MainWindow.document.close();
           setTimeout(function () {
               MainWindow.print();
           }, 500)
           return false;

}

0
Mohamed Ashique

レンダリングの問題の原因としては、CSSファイルと画像に使用している相対パスが考えられます。まず、絶対パスを使用してみてください。 HTML構造がレンダリングされるという事実は、新しいHTMLドキュメントの生成に関する問題を排除します。また、media="print"to linkelement。

このコードは機能しますが、部分的には：

    (function() {

function createPopup( data ) {
    var mywindow = window.open( "", "new div", "height=400,width=600" );
    mywindow.document.write( "<html><head><title></title>" );
    mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"/>" );
    mywindow.document.write( "</head><body >" );
    mywindow.document.write( data );
    mywindow.document.write( "</body></html>" );

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

    return true;

}
document.addEventListener( "DOMContentLoaded", function() {
    document.getElementById( "print" ).addEventListener( "click", function() {
        createPopup( document.getElementById( "content" ).innerHTML );

    }, false );

});

   })();

.close（）呼び出しを削除しました。一部のCSSスタイルは印刷では機能しない場合があることに注意してください。

0
Gabriele Romanato

印刷するdivを、print関数への入力として渡します。

<input type='button' id='btn-print' value='Print Receipt' onclick="printDiv('#invoice-box-id');" />

次に、要素を複製し、

function printDiv(elem)
{
   renderMe($('<div/>').append($(elem).clone()).html());
}

レンダリングするクローン要素を渡し、スタイルシートを含めます。

function renderMe(data) {
    var mywindow = window.open('', 'invoice-box', 'height=1000,width=1000');
    mywindow.document.write('<html><head><title>invoice-box</title>');
    mywindow.document.write('<link rel="stylesheet" href="printstyle.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

InnerHTMLが渡された場合、スタイルは無視されます。

0
Bharathkumar V