web-dev-qa-db-ja.com

モーダルコンテンツをA4ページ全体として印刷する

私は2つのことを試みています：

  1. A4ページに表示されるように、モーダルにコンテンツを表示する
  2. windows.print（）主要ブラウザーを介したA4ページのモーダル

以下は私のCSSです：

_.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px black solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        margin:0 !important;
        padding:0 !important;
        height:100% !important;
        visibility: hidden;
    }

    .page .subpage .col-md-12,.col-lg-12{
        float:left;
        width:100%;
    }
    .page .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
        position:absolute;
    }
    .page {
        visibility: visible;
    }
}
_

これがモーダルの外観です： enter image description here

しかし、これは、ボタンのクリック時にwindow.print()を呼び出す方法です。 enter image description here

ここで何が悪いのですか？相対的なCSSの初心者は、SOの質問やその他のリソースをたくさん見てきましたが、これを理解できないようです。

更新：A4ページの幅をカバーするモーダルコンテンツ（つまり、class = "page"）を取得するために、z-index：9999およびwidth：140％を使用しました。それが最良の解決策であるとは思わないでください。また、297mm全体を伸ばすための高さを得ることができません。高さは2番目の画像に示されているのと同じくらいです。 140％は、Chromeで保存されたPDFでは問題なく見え、Firefoxでは（当然）カットオフされ、IEでは空白のPDFとして表示されます。更新されたCSS：_@media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}_

javascripthtmlcsstwitter-bootstrapprinting
17
Reise45

コメントは書いても書けないので、回答欄に書いてあります。 tl; dr、より多くのコードを提供するか、この問題を目に見える場所で再現する必要があります。

私はあなたのコードをクラスpageのdivだけでプレーンページに入れ、クラスsubpageのdivをネストしました。パディングの問題がいくつかあり、印刷ビューはWebビューのように見えません。

min-height: 297mm;は必要ありません。.subpageの高さ設定と一致しないため、余分なスペースが追加されていました。

あなたのposition:absolute;があなたの.subpageを印刷ビューで押しつぶしました。

しかし、これらの2つの調整により、CSSはHTMLの単純なdivだけで問題なく機能します。あなたのページの他の何かが矛盾する寸法を持っているのではないかと思いますが、再び、フィドルまたは何かの複製なしでは、それを見ることができません。

PS：私はしばらく前からこの他の投稿を見ました、そしてそこにデモがあります。それは有望に見えます： A4用紙サイズを設定するCSS

2
Ognami

これをお試しください

@media print{
  body * {
    visibility: hidden;
  }
  #page, #page * {
    visibility: visible;
  }
  #page {
    position: absolute;
    top: 0;
    left: 0;
  }
}
2
Adeeb basheer

私はあなたのニーズに合うようにjsfiddleの例を更新しました

ここにCSSコードがあります

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: yellow;
  }
}

ここにhtmlがあります：

<div>
  <button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />
<div id="printSection">
  <div id="printThis">
    This should BE printed!
  </div>

  <div id="printThisToo">
    This should BE printed, too!
  </div>

</div>

そして、printを呼び出すJavaScriptコード：

document.getElementById("btnPrint").onclick = function() {
  window.print();
}

http://jsfiddle.net/95ezN/1459/

enter image description here

0
flakerimi