2017-04-19 3 views
1

JavaScriptを介して開いたウィンドウに出力を印刷する際に問題があります。私はwindow.open経由で新しい文書を作成し、ブートストラップファイルへのCDNリンクを添付しています。開いているウィンドウでは、すべてが正常に見えますが、プリント(XPSドキュメントライター)を使用すると、ここでいくつかのスタイル(.btn-group)がありますが、レイアウトやインラインスタイルはありません。js window.openの後にhtml/cssレイアウトを印刷

Q:新しいウィンドウに表示されるものをどのように印刷できますか?

CDNのリンクでは、media='all'(ただし、media='print'も試しています)。

の作業例: jsfiddle

$('#openNewWindow').click(function(e){ 
    var printWindow = window.open('', '_blank', 'width=1100, height=500'); 

    printWindow.document.open(); 
    printWindow.document.write("<!doctype html><head><title>title</title>"); 

    var cdn = ` 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">   
    `; 

    printWindow.document.write(cdn);   
    printWindow.document.write("</head><body>"); 

    content = ` 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-8" style="background-color: red">.col-md-8</div> 
       <div class="col-md-4" style="background-color: blue">.col-md-4</div> 
      </div>    
     </div> 

    <div class="btn-group" role="group" aria-label="..."> 
     <button type="button" class="btn btn-default">Left</button> 
     <button type="button" class="btn btn-default">Middle</button> 
     <button type="button" class="btn btn-default">Right</button> 
    </div> 
    `; 

    printWindow.document.write(content);   
    printWindow.document.write('</body></html>'); 

    printWindow.document.close(); // necessary for IE >= 10 
    printWindow.focus(); // necessary for IE >= 10*/ 

    setTimeout(function() { 
     printWindow.print(); 
    },1000) 

}); 

答えて

1

イムなぜ確かに、しかし、XSサイズ(COL-XS- *)とブートストラップ3印刷作業ではないので、あなたはXSに、印刷のためのあなたのポップアップを書き換えたり、CSSを見つけることができますそのための修正

0

一般に、デフォルトの自動幅ディメンションの本体と、本体内の浮動/非制限divの場合、暗黙のブラウザの方法でプリントスクエア用にレイアウトされます。

あなたは(

あなたがメイン文書には影響したくないこれらの追加のスタイルを定義することができます(などまたはその代わりにdivの幅を定義)、固定体の幅とそれ浮かべ/配置無制限のdivのいずれかを定義する必要がありますこのような印刷専用のスタイル文書の固定体幅)、など:

<link href="printspecific.css" media="print" rel="stylesheet" /> 

そして、あなたは適切なスタイリングが欠け検出ので、あなたが望むように、紙準備ができてドキュメントが動作しますまでそこ実験。私はボディ要素の定義された幅がレイアウト見た目を正しくするのに十分だろうと推測しています。

関連する問題