web-dev-qa-db-ja.com

FireFoxおよびIE 8での横または縦の印刷

現在、FireFoxの最新バージョンとIE8を使用しています

印刷の向きを変更するために、私は使用しました

@page {
  size: portrait;
}

私のCSSファイルで。 @ページ参照

@ページは両方のブラウザでサポートされていると記載されていますが、私のテストの後、Chrome以外ではまったく機能しません。 FireFox/IE8でページを異なる向きで印刷する方法を教えてください。

javascriptjqueryhtmlcssprinting
10
user1871516

印刷用のページの向きに関するCSS3標準は、ほとんどのブラウザーでまだ実装中であるため、現在、アプリケーションがこの機能に依存してクロスブラウザーで動作することはありません。

Googleの場合Chrome正常に動作します： http://dev.activisual.net/test.html

最終的には、印刷処理中にユーザーの向きを変更するという決定が（たとえそれが機能する場合でも）ユーザーに通知するので、横向きまたは縦向きでページを印刷する必要があることをユーザーに通知できますが、通常、デスクトップブラウザでの印刷中にユーザーが方向を変更できないようにする方法。

ごく最近報告されたFFのバグレポートを以下に示します。 https://bugzilla.mozilla.org/show_bug.cgi?id=851441

この質問で受け入れられた回答を参照して読むことができます： HTMLからの横向き印刷

14
jacmkno

MDNリファレンスが言うように：

変更できるのは、ドキュメントの余白、孤児、未亡人、改ページのみです。他のCSSプロパティを変更しようとしても無視されます。

あなたが望むことを達成するマークアップをあなたに提供する限り、それはSOで許可されているものの範囲外です。さらに、IEの2世代のバックバージョンだけでなく、現在の世代のFirefoxも実行できるようにしたいので、少し手間がかかる可能性があります。

3
Rob

ページ印刷レイアウトはデフォルトで縦長です。横長に変更して違いを確認するには、以下を試してください。

以下のcssコードはバージョン19.0以降でサポートされています。試してみてください。問題が解決するはずです。IE8の場合、HTMLでHTML5ディレクティブを使用する必要があります

<!doctype html>

CSSコード：

@media print{@page {size: landscape}}

Firefox： https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart Firefox support

IE http://msdn.Microsoft.com/en-us/library/hh781508（v = vs.85）.aspx enter image description here

1
Mehdi Karamosly

これは変だ

{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

firefoxの最新バージョンでは、自分でテストして正常に動作するため、動作しません。

何も見当たらない場合は、- ここ は（印刷用の）縦向きモードとは完全に一致していませんが、アイデアが得られる場合があります。

最後に、絶望的になり、これを行う方法を本当に見つける必要がある場合は、たとえば html2canvas でWebページのスクリーンショットを撮り、画像を回転してから、Webページの代わりに画像を印刷することができます。 ...理想的なソリューションではありませんが、この方法でブラウザをバイパスします。

0
Thanos

簡単なフォームを作成しているときに、少し前にこの問題に遭遇しました。

Chromeは、ユーザーが印刷プロセスを制御するのを制限するのに最適なブラウザのようです。ただし、まだ制限があり、Firefox /その他のブラウザは@pageをサポートしていません。

私の解決策は、スタイルシートに@media印刷を追加して、ユーザーにページを縦向きで印刷するように「促す」ことでした。 @ページはクロム専用です。表示：なし。ヘッダー、ナビゲーション、フッターで、不要なブラウザーの追加を削除します（これはchromeとfirefoxでのみ機能します。つまり、ヘッダーを選択する必要はありません）。入力フィールドでは、フォーム用だったので...最後に、標準の8.5 x 11枚の紙のサイズと同じように、コンテナーdivに幅と高さを配置しました。

@media print{
    @page {size: auto; margin: auto;}
    header nav, footer {display: none;}
    input {border: 0px;}
    #container  {width:9.1in; height:10in;}

}

結局のところ、Webページの印刷は依然として非常にブラウザー/ユーザーに依存しており、実際にそれについてできることはほとんどありません。 @media印刷を作成すると役立ちますが、実際にページを希望どおりに印刷するには、ユーザーがエクスポートできるPDFバージョンのページを生成するしかありません。

0
Joe_Maker