web-dev-qa-db-ja.com

ChromeからHTMLページを一定のサイズで印刷するにはどうすればよいですか？

印刷するHTMLページのセットを設計しており、ページの要素が互いに同じスケールになるようにします。たとえば、幅が200pxとして定義されているdivのクラスがいくつかのページのそれぞれに表示されます。各ページが印刷されるときに、正確に同じサイズで表示されるようにします（たとえば、切り取りや重ね合わせに適しています）。

Chrome（主に他の場所に要素のコピーを小さくするためのCSSズームルール））で最適に動作するものをいくつか使用しているので、理想的にはChromeを使用し続けます（これはFirefoxでは印刷ダイアログに明示的な縮尺比があるため、より簡単になります。）しかし、Chromeでは、印刷時に同じ要素を一定のサイズに保つ異なるページから簡単ではないようです。

ChromeのPDF生成（これはChromeからの印刷で行われます）は、ページの幅を定義するセクションを選択し、残りの部分をスケーリングします。または、1ページの「最適な」要素数に収まるようにページサイズを設定しようとします。各ページの外側のフレーミング要素がすべての場合で同じサイズでない場合、要素のように見えます画面サイズが200pxの場合、3〜4 cmから1.5〜2 cmまたはそれ以下のサイズのものが出てきます。

@page sizeは役に立たない：私はこのCSSを持っているが、何の違いももたらさない：

@media print {
  @ page size: 297mm 210mm 
}

一貫したサイズで印刷できるようにする方法について考えている人はいますか？

私が適用できる極端な回避策の1つは、1つの大きなHTMLページのすべての部分を作成し、Javascriptを使用して特定の部分を印刷する唯一の部分としてマークすることです...それがうまくいくかどうかはわかりませんdいくつかの異なるページで物事を熱心にするために、かなり簡潔にします。他のアイデアはありますか？

htmlcssgoogle-chromeprintingprint-css
27
AlexC

私は解決策を見つけました。重要なのは、各ドキュメントで、Chrome=要素が印刷用に分割する「論理ページ」が同じサイズになるようにすることです。たとえば、1つのドキュメントに200x200pxの正方形とChrome 5x4の長方形にグループ化して横向きに印刷することを決めた場合、Chromeはサイズ1000x800pxの要素に分割された他のすべての一貫したドキュメントを印刷することを確認する必要があります。

単に複数のスパンまたはインラインブロックdivが順番に並んでいるドキュメントの場合、選択した幅（1100px）に正確にdivを設定し、印刷プレビューでそのdivがページ全体の幅を占めるようにするだけで十分です。次に、CSSに次のようなものが含まれていることを確認します。

@media print {  
  @page {
    size: 297mm 210mm; /* landscape */
    /* you can also specify margins here: */
    margin: 25mm;
    margin-right: 45mm; /* for compatibility with both A4 and Letter */
  }
}

これで十分でない場合は、すべてを固定サイズ（width: 1100px; height: 800px; overflow: hidden;）は、強制的にChromeを必要なページに分割する（および印刷時に要素を同じサイズに保つ）方法として）ジョブを実行します。

16
AlexC

異なるサイズを許可しますが、各サイズのマージンとデザインを制御します！

最初に答えたとき、Chrome 32.0.1700.107 m

ページサイズ用に確立されたW3 CSS3標準 は、印刷インターフェイスのChromeのプラグインから直接「SAVE AS PDF」オプションと連携して動作します。

私は、さまざまなプロジェクトのさまざまなインターフェイスとゴーアラウンドソリューションで長年問題を抱えています（たとえば、処理が重くてコードが面倒なサーバーから直接PDFを生成したり、Windows印刷インターフェイスを使用するようにユーザーに伝えたりするなど）。これは私にとって素晴らしい解決策であり、決定的なもののようです！

A4サイズとレターサイズの印刷マージンのオプションを使用した同じページの完璧な例を次に示します。

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page {
       margin: 3cm;
    }
 }
 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }

異なる用紙サイズを使用して、何度でも複製できます。追加の値（色、非表示の要素など）は@pageの外側に移動します。

8
DavidTaubmann

また、用紙サイズがA4およびポートレートの場合、これも使用できます

@page {
    size: A4 landscape;
}

これはChromeで動作します

5
G.Georgiou

at-rulesメディアクエリの構造が正しくありません。試してください：

@media print {  
    @page {  
      size:297mm 210mm;  
    }  
}

少なくとも正しい構文を提供します。 sizeプロパティに関しては、css2.1から削除され、ブラウザのサポートは異なります。 width、margin、および/またはpaddingを常に設定できます。

1
albert