HTMLからのランドスケープ印刷
https://stackoverflow.com/questions/138422
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
HTMLレポートがありますが、列が多いため、横向きに印刷する必要があります。ユーザーがドキュメントの設定を変更せずにこれを行う方法はありますか？
そして、ブラウザ間のオプションは何ですか。
解決
CSSでは、以下に示すように@pageプロパティを設定できます。
@media print{@page {size: landscape}}
@pageは CSS 2.1仕様の一部ですこの size は、質問への回答で強調されているほどではありません> @Page {size ：landscape}は時代遅れですか？：
CSS 2.1は、サイズ属性を指定しなくなりました。現在の作業 CSS3 Paged Mediaモジュールのドラフトはそれを指定します（ただし、これはそうではありません 標準または承認済み）。
前述のとおり、サイズオプションは CSS 3ドラフト仕様から取得されます>。私のサンプルではサイズは省略されていますが、理論的にはページサイズと向きの両方に設定できます。
サポートは、 Firefoxで報告されたバグレポートと非常に混ざっています。ほとんどのブラウザサポートしません。
IE7で動作するように見えるかもしれませんが、これはIE7が印刷プレビューでユーザーが最後に選択した横向きまたは縦向きを覚えているためです（ブラウザのみが再起動されます）。
この記事には、ユーザーのブラウザにキーを送信するJavaScriptまたはActiveXを使用する回避策がいくつかありますが、これらは理想的ではなく、ブラウザのセキュリティ設定の変更に依存しています。
代わりに、ページの向きではなくコンテンツを回転させることもできます。これは、スタイルを作成し、これらの2行を含むボディに適用することで実行できますが、これには多くの配置とレイアウトの問題を引き起こす欠点もあります。
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
私が見つけた最後の選択肢は、PDFでランドスケープバージョンを作成することです。ユーザーが印刷を選択するとPDFが印刷されるように指定できます。しかし、IE7でこれを自動印刷することはできませんでした。
<link media="print" rel="Alternate" href="print.pdf">
結論として、一部のブラウザでは@page sizeオプションを使用すると比較的簡単ですが、多くのブラウザでは確実な方法がなく、コンテンツと環境に依存します。 これが、印刷が選択されたときにGoogleドキュメントがPDFを作成し、ユーザーがそれを開いて印刷できるようにする理由かもしれません。
他のヒント
私の解決策：
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
これは、 IE 、 Firefox 、および Chrome
@pageルールが削減されました CSS2からCSS2.1へのスコープ。完全な CSS2 @pageルールが報告された Operaでのみ実装されます その時でさえ）。私自身のテストはそれを示しています IEとFirefoxは@pageをサポートしていません すべて。現在廃止されている CSS2仕様セクション13.2.2です ユーザーのオーバーライドが可能 向きの設定と（ 例）横向き印刷を強制する しかし、関連する「サイズ」プロパティが持っています 一貫性のあるCSS2.1から削除されました 現在のブラウザがないという事実 それをサポートしています。で復活しました CSS3 Paged Mediaモジュール、ただし注意 これはワーキングドラフトにすぎない（ 2009年7月）。
結論：忘れる 現在の@pageについて。もし、あんたが 文書を印刷する必要があると感じる 横向きで、自問してください 代わりにデザインを作成できる場合 より流動的。本当にできないなら （おそらく、ドキュメントに含まれているため 多数の列を持つデータテーブル、 例）、あなたが助言する必要があります 向きを設定するユーザー 風景とおそらく方法の概要 最も一般的なブラウザで実行してください。の もちろん、一部のブラウザにはプリントがあります 幅に合わせる（縮小する）機能 （例：Opera、Firefox、IE7）が、 持っているユーザーに依存することはお勧めできません この施設またはそれを切り替えること オン。
これをCSSに追加してみてください：
@page {
size: landscape;
}
CSS 2 @pageルールを使用して、 'size'プロパティをlandscape に設定します。
size プロパティは、前述のとおりです。印刷時にページの向きとサイズの両方を設定するには、次を使用できます。
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
ページのコンテンツを回転させるだけでは不十分です。これは、ほとんどのブラウザ（Chrome、Firefox、IE9 +）で動作する正しいCSSです。
最初にbody margin を0に設定します。そうしないと、ページの余白が印刷ダイアログで設定した余白よりも大きくなるためです。また、ページを視覚化するために background 色を設定します。
body {
margin: 0;
background: #CCCCCC;
}
margin 、 border 、および background が必要です。
padding は、必要な印刷余白に設定する必要があります。印刷ダイアログで、同じマージン（この例では10mm）を設定する必要があります。
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
A4ページのサイズは210mm x 297mmです。サイズから印刷マージンを差し引く必要があります。ページのコンテンツのサイズを設定します。
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
ブラウザによってページのスケーリングが少し異なるため、277mmではなく276mmを使用します。そのため、それらのいくつかは、高さ277mmのコンテンツを2ページに印刷します。 2番目のページは空になります。 276mmを使用する方が安全です。
印刷ページに margin 、 border 、 padding 、 background は必要ありません。それらを削除します：
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
変換の起点は 0 0 であることに注意してください！また、ランドスケープページのコンテンツを276mm下げる必要があります！
また、縦向きと横向きのページが混在している場合、IEはページを縮小します。 -ms-zoom を1.665に設定して修正します。 1.6666などに設定すると、ページコンテンツの右側の境界線が切り取られることがあります。
IE8などの古いブラウザーのサポートが必要な場合は、 -webkit-transform 、 -moz-transform 、 filter：progid：DXImageTransform.Microsoftを使用できます.BasicImage（rotation = 3）。しかし、最新の十分なブラウザには必要ありません。
また、非標準のIE専用css属性ライティングモード
div.page {
writing-mode: tb-rl;
}
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Firefox 16.0.2では動作しませんが、Chromeでは動作しています
この問題を1回解決しようとしましたが、すべての調査でActiveXコントロール/プラグインに導かれました。ブラウザ（とにかく3年前）が印刷設定（部数、用紙サイズ）を変更することを許可したトリックはありません。
「風景」を選択する必要があることをユーザーに慎重に警告するように努力しました。ブラウザの印刷ダイアログが表示されたとき。 「印刷プレビュー」も作成しましたIE6の機能よりもはるかに優れた機能のページ！一部のレポートではアプリケーションのデータテーブルが非常に広く、印刷プレビューにより、テーブルが用紙の右端からはみ出すことがユーザーに明確になりました（IE6は2枚の印刷にも対応できないため）。
そして、はい、人々は今でもIE6を使用しています。
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
このスタイルをテーブルに適用する場合は、このスタイルクラスで1つのdivタグを作成し、このdivタグ内にtableタグを追加して、最後にdivタグを閉じます。
このテーブルは横向きでのみ印刷され、他のすべてのページは縦向きモードでのみ印刷されます。しかし、問題は、テーブルのサイズがページの幅よりも大きい場合、行の一部が失われたり、ヘッダーが欠落したりすることがあることです。注意してください。
良い一日を。
ありがとう、 Naveen Mettapally。
横向きの設定で空のMSドキュメントを作成し、メモ帳で開きました。次をHTMLページにコピーして貼り付けました
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>
印刷プレビューでは、ページが横サイズで表示されます。 IEおよびChromeでは正常に動作しているようですが、FFではテストされていません。
これは私にも役立ちました：
@media print and (orientation:landscape) { … }
