web-dev-qa-db-ja.com

印刷時にHTMLを1ページに合わせる

CSSを使用してサイズをwidth:1660px;height:480px;に固定することを目的とした図を含むWebページがあります。ページ（リンクできますか？）がブラウザーに正しく表示されますが、Googleで印刷するときChrome（他のブラウザーはまだテストしていません）、横に大きすぎて単一のページに収まるHTMLを1つの印刷ページに収まるようにスケーリングするにはどうすればよいですか

出力は次のようになります（Firefox 60）：

enter image description here

次のようなメディアクエリをいじってみました。

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

しかし、印刷プレビューには効果がありません。

[編集]

Internet Explorer 11は、印刷ダイアログでページを自動的に拡大縮小できるようです。 Google Chromeもこれを行えない理由はわかりません。

[編集]

ページも変形してみました。ただし、印刷結果はChrome vs IE11で大きく異なります。

@media print
{
    html
    {
        transform: scale(0.5);transform-Origin: 0 0;
    }
}

次に、ページをズームしてみました。これはかなりうまくいきましたが、Chrome=のみに影響するのか、それともIEとFirefoxにも影響するのかわかりません。

@media print
{
    html
    {
        zoom: 50%;
    }
}

いずれの場合も、新しいJavaScriptコントロールも作成しない限り、ユーザーがCSSを使用するときに効果を無効にする方法はありません。

htmlcssmedia-queries
7
posfan12

これは、残念ながら、非常に一般的な問題です。私の経験では、PDFを作成する以外に、ブラウザー間で印刷レイアウトを制御する信頼できる方法はありません。多くの「HTML to PDF」パッケージが利用可能ですが、それらは一般に動作しますが、実行するブラウザに応じて同様のバリエーションがあります。ハードウェアの問題（画面サイズなど）、ブラウザ設定（固有）ブラウザの違いに加えて、ローカルに設定されたデフォルトのフォントサイズやその他の構成設定）とユーザー設定（たとえば、ページズーム）は、基本的にサーバーサイドドキュメントを生成することを除いてほとんど不可能です。

私はこれがあなたが聞きたいものではないと確信していますが、ユーザーが開発者が印刷したい方法でユーザーがWebページを印刷できることを確認する唯一の信頼できる解決策はサーバー上で完全なPDFを生成します。ソース言語（PHP、Python）に応じていくつかの異なるパッケージで実行できますなど）開発者にとっては間違いなくより多くの作業ですが、画像サイズ、テキストサイズ、フォントなどを制御することができます-CSSで制御できる必要があるすべてのもの、およびページが期待どおりに印刷されることを知っているブラウザーの印刷機能をトリガーするページの印刷ボタンの代わりに、サーバーからページのファイルをダウンロードし、すべてのフォーマット済みで印刷の準備ができます。文字（USA）またはA4（ 2つのサイズは十分に近いので、ほとんどの人はAdobe Readerまたは他のソフトウェアに適応して、データを失ったり、余白を増やしたりせずに収まるようにできます。

あなたの文書が本当に「ただ一つの画像」であれば、それはさらに簡単です。画像をサーバー側で作成し、単一ページのダウンロード可能なPDFに埋め込みます。サーバー側で簡単に画像を作成できない場合は、 [〜＃〜] urlbox [〜＃〜] などのサービスを使用できます（これは有料会員として使用しますが、その他の接続）を使用して画像を生成し、サーバーにダウンロードしてPDFに埋め込みます。

4
manassehkatz-Reinstate Monica