列が多いため、横向きに印刷する必要がある HTML レポートがあります。ユーザーがドキュメントの設定を変更することなく、これを行う方法はありますか?
そして、ブラウザ間のオプションは何ですか。
460201 次
17 に答える
444
CSSでは、以下に示すように@pageプロパティを設定できます。
@media print{@page {size: landscape}}
@pageはCSS2.1仕様の一部ですが、 @ Page {size：landscape}は廃止されていますか？sizeという質問への回答では強調されていません。：
CSS2.1はsize属性を指定しなくなりました。CSS3 Paged Mediaモジュールの現在の作業ドラフトでは、それが指定されています（ただし、これは標準ではなく、受け入れられていません）。
前述のように、サイズオプションはCSS3ドラフト仕様に基づいています。理論的には、ページサイズと向きの両方に設定できますが、私のサンプルではサイズが省略されています。
サポートは、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を作成し、ユーザーがそれを開いて印刷できるようにする理由である可能性があります。
于 2009-09-08T08:50:50.727 に答える
38
私の解決策：
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
- With
media="print"は Print にのみ適用されます。 - これは で動作し
IE、FirefoxChrome
于 2014-09-24T20:21:09.063 に答える
17
前述のように、sizeプロパティはあなたが求めているものです。印刷時にページの向きとサイズの両方を設定するには、次を使用できます。
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
@page ドキュメントへのリンクは次のとおりです。
于 2017-02-20T12:20:57.310 に答える
13
CSSから引用-Wikiについて話し合う
@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など）が、この機能を持っているか、スイッチを入れているユーザーに依存することはお勧めできません。
于 2010-12-27T16:51:55.877 に答える
12
これを CSS に追加してみてください:
@page {
size: landscape;
}
于 2008-09-26T09:35:56.377 に答える
8
'size' プロパティを landscapeに設定できるCSS 2 @page ルールを使用できる場合があります。
于 2008-09-26T09:33:47.943 に答える
5
非標準の IE のみの css 属性の writing-modeを使用することもできます
div.page {
writing-mode: tb-rl;
}
于 2008-09-26T09:28:55.443 に答える
3
横向き設定で空白の 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 ではテストされていません。
于 2015-01-05T20:06:39.183 に答える
1
<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タグ内にテーブルタグを追加して、最後にdivタグを閉じます。
この表は横向きでのみ印刷され、他のすべてのページは縦向きでのみ印刷されます。ただし、問題は、テーブルサイズがページ幅よりも大きい場合、一部の行が失われる可能性があり、ヘッダーも失われる可能性があることです。気をつけて。
良い一日を過ごしてください。
ありがとう、NaveenMettapally。
于 2010-06-18T09:24:57.460 に答える
1
私は一度この問題を解決しようとしましたが、調査の結果、ActiveX コントロール/プラグインにたどり着きました。ブラウザ (とにかく 3 年前) が印刷設定 (部数、用紙サイズ) を変更することを許可したトリックはありません。
ブラウザの印刷ダイアログが表示されたときに「横向き」を選択する必要があることをユーザーに注意深く警告するように努力しました。また、「印刷プレビュー」ページも作成しましたが、これは IE6 よりもはるかにうまく機能しました。私たちのアプリケーションには、一部のレポートに非常に広いデータ テーブルがあり、印刷プレビューにより、テーブルが用紙の右端からはみ出すタイミングがユーザーに明確にわかりました (IE6 は 2 枚のシートへの印刷にも対応できなかったため)。
はい、人々は今でも IE6 を使用しています。
于 2009-11-10T16:24:28.770 に答える
1
これも私のために働いた：
@media print and (orientation:landscape) { … }
于 2014-07-25T07:15:17.427 に答える
1
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Firefox 16.0.2 では動作しませんが、Chrome では動作しています
于 2012-11-24T13:15:17.587 に答える
-1
次のことを試すことができます。
@page {
size: auto
}
于 2019-11-06T10:03:49.273 に答える