35

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

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

ChromeのPDF生成（Chromeからの印刷が内部で行うこと）は、ページの幅を定義するためにいくつかのセクションを選択し、それに基づいてページの残りの部分を拡大縮小するように見えます。または、1ページの「最適な」要素数に合うようにページサイズを設定しようとする場合もあります。各ページの外側のフレーミング要素がすべての場合で同じサイズではない場合、画面サイズが200pxの要素は、3〜4 cmから1.5〜2cm、またはそれよりも小さいサイズで表示される可能性があります。

使用するだけ@page sizeでは役に立ちません。私はこのCSSを持っていますが、違いはありません。

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

一貫したサイズで物を印刷する方法について誰かが考えていますか？

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

4

5 に答える 5

26

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

単純に複数のスパンまたはインラインブロックdivが順番に並んでいるドキュメントの場合、divを選択した幅（1100px）に正確に設定し、その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を強制的に目的のページに分割する（したがって、印刷時に要素を同じサイズに保つ）方法として、すべてを固定サイズ（）の1つ以上のdiv内に配置することが機能します。

于 2014-08-11T16:32:29.023 に答える
10

さまざまなサイズを許可しますが、各サイズの余白とデザインを制御します。

最初に答えたとき、私はChrome32.0.1700.107mを使用していました

ページサイズ用に確立されたW3CSS3標準は、印刷インターフェイス上のChromeのプラグインから直接「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の外に出ます。

于 2014-02-17T18:13:29.197 に答える
5

また、用紙サイズがA4でprotraitの場合は、これも使用できます。

@page {
    size: A4 landscape;
}

これはChromeで動作します

于 2016-04-11T07:30:48.647 に答える
1

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

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

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

于 2013-03-28T08:36:32.027 に答える
0

PDFに印刷する場合は、https：//make.cmを使用すると、サーバーの負荷を処理でき、レンダリングを正しく行うための複雑さが解消されます。私はそれをプロジェクトに使用しましたが、PDFシステムへのクロム印刷を処理するよりもはるかに簡単でした

于 2022-01-26T00:14:57.133 に答える