印刷プレビューが空白になる印刷用HTMLコンテンツに外部スタイルシートの参照を追加した後

ページのDIVコンテンツを印刷したいのですが、JSを使用してdivの内容を取得し、新しいウィンドウobjに渡します。（）。テキストの内容と画像がそのまま表示されます。私は印刷プレビューが空白の印刷プレビューが空白になる印刷用HTMLコンテンツに外部スタイルシートの参照を追加した後

<link href="myprintstyle.css" rel="stylesheet" type="text/css">

取り出さのdivの内容に次の行を追加しますだけ。他のスタイルシートも追加しようとしましたが、同じ結果が出ました。私がHTMLコンテンツを印刷するために追加するスタイルシートのリファレンスは、同じ結果 - ブランクプレビューページです。ここにページコンテンツを印刷するMy JSコードがあります。

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">'); 
function Popup(htmldata) 
{ 
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20'); 
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>"; 
    mywindow.document.write(str); 
    mywindow.document.close(); // necessary for IE >= 10 
    mywindow.focus(); // necessary for IE >= 10 

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

    return false; 
}

修正をお願いいたします。私は印刷コンテンツのスタイルを設定したい。ブラウザ：Chrome

Mozillaで同じコードが動作しています。しかし、クロムで私はこの問題に直面しています。

出典

2016-01-16 zee

なぜjQueryタグですか？ – j08691

CSSは、本文ではなくページの先頭から呼び出される必要があります。

出典

2016-01-16 19:06:51 vandijkstef

私は頭の中にCSSを追加しようとしましたが、まだ動作しません – zee

ライブの例なしで伝えるのは難しいです。 Chromeの問題のみが表示されます。開発者ツールを確認できますか？（右クリック - >検査）。ネットワークタブ（保存ログを有効にする）とリソースタブ（ "frames"フォルダを開く）に興味があり、スタイルシートが正しく読み込まれているかどうかを確認します。コンソールにもエラーがあるかどうかを確認してください。さらに、要素タブを使用して、HTMLデータの内容を確認することもできます。もう一つの提案は、あなたのCSSのリンクで 'media = "print"'を追加します – vandijkstef

私はこれが古い質問だと知っていますが、ここでこの問題を抱えている人にとっては解決策です。

文書の読み込みがまだ完了していないため、空白のページが表示されています。ですので、修正するにはにmywindow.print()を追加してください。

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">'); 
function Popup(htmldata) 
{ 
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20'); 
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>"; 
    mywindow.document.write(str); 
    mywindow.document.close(); // necessary for IE >= 10 
    $(mywindow.document).ready(function(){ 
    //set this timeout longer if you have many resources to load 
    setTimeout(function(){ 
     mywindow.focus(); 
     mywindow.print(); 
    },1000); 

    return false; 
}

出典

2016-11-09 07:14:49 Miqe

CSSの読み込みが完了していないので、ページは空白になります。 –

しかし、setTimeoutではなくwindow.onload関数を使っています... CSSが指定されたタイムアウトでロードできる場合 –

良い方法はありませんか？タイムアウトは少しハッキリです。スタイルシートを読み込むのに時間がかかると、空白のページが途切れて印刷されます – chasmani

印刷プレビューが空白になる印刷用HTMLコンテンツに外部スタイルシートの参照を追加した後

答えて

関連する問題