web-dev-qa-db-ja.com

HTMLからのランドスケープ印刷

HTMLレポートがあります。列が多いため、横長に印刷する必要があります。ユーザーが文書設定を変更しなくても、これを行う方法はありますか？

そしてブラウザ間のオプションは何ですか。

htmlcssprinting
218
doekman

あなたのCSSでは以下のように@pageプロパティを設定することができます。

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

@pageは CSS 2.1仕様の一部です しかし、このsizename__は質問に対する答えで強調されていません @Page {size：landscape}は時代遅れですか？ ：

CSS 2.1では、サイズ属性は指定されていません。 CSS3 Paged Mediaモジュールのための現在のワーキングドラフトはそれを指定します（しかしこれは標準的でも受け入れられてもいません）。

前述のように、サイズのオプションは CSS 3 Draft Specification から来ています。理論上は、ページサイズと向きの両方に設定できますが、私のサンプルではサイズは省略されています。

このサポートはFirefoxで提出される バグレポートと非常に混同されています 、ほとんどのブラウザはそれをサポートしていません。

それはIE 7で動作するように見えるかもしれませんが、これはIE 7が印刷プレビューでユーザーが最後に選択した横長または縦長を記憶するためです（ブラウザのみが再起動されます）。

この記事 は、ユーザーのブラウザにキーを送信する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を作成し、ユーザーがそれを開いて印刷できるようにする理由です。

345
John

私の解決策：

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

これはIE、FirefoxおよびChromeで機能します。

27
Eduardo Cuomo

から引用しました CSS-Discuss Wiki

@pageルールはCSS2からCSS2.1に範囲が縮小されました。完全なCSS2 @pageルールはOperaにのみ実装されていると言われています。私がテストしたところ、IEとFirefoxは@pageをまったくサポートしていません。現在は陳腐化しているCSS2仕様のセクション13.2.2によると、ユーザーの向きの設定を上書きして（たとえば）Landscapeで強制的に印刷することは可能ですが、関連する "size"プロパティはCSS2.1から削除されました。現在のブラウザではサポートされていません。 CSS3 Paged Mediaモジュールで復活しましたが、これはワーキングドラフトにすぎません（2009年7月現在）。

結論：今のところ@pageは忘れてください。文書を横向きに印刷する必要があると感じる場合は、代わりにあなたのデザインをより流動的にすることができるかどうか自問してください。それができない場合（おそらく、文書に多数の列を含むデータテーブルが含まれているなどの理由で）には、方向を横に設定し、おそらく最も一般的なブラウザでそれを行う方法を概説するようにユーザーに助言する必要があります。もちろん、一部のブラウザ（横幅に合わせた印刷）機能（例えば、Opera、Firefox、IE7）がありますが、この機能を持っているかオンになっているユーザーに頼るのはお勧めできません。

12
Ahmad Alfy

これをあなたのCSSに追加してみてください。

@page {
  size: landscape;
}
12
gizmo

CSS 2 @page rule を使うと、 'size'プロパティをlandscapeに設定することができます を使うことができます。

8
Ian Oxley

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 documentation へのリンクです。

6
robstarbuck

ページの内容を回転させるだけでは不十分です。これは、ほとんどのブラウザ（Chrome、Firefox、IE9 +）で動作する正しいCSSです。

最初に本文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)を使うことができます。しかし、現代の十分なブラウザでは、それは必要ではありません。

5
Denis

非標準のIE専用のcss属性を使用することもできます writing-mode

div.page    { 
   writing-mode: tb-rl;
}
5
yann.kmm
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

firefox 16.0.2では機能していませんが、Chromeでは機能しています

2
Satheesh

白紙の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ではテストされていません。

1
Shankar
<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

このスタイルをテーブルに適用する場合は、このスタイルクラスを使用してdivタグを1つ作成し、このdivタグ内にテーブルタグを追加して最後にdivタグを閉じます。

このテーブルは横長でのみ印刷され、他のすべてのページは縦長モードでのみ印刷されます。しかし、問題は、テーブルのサイズがページの幅よりも大きい場合、一部の行が失われる可能性があり、場合によってはヘッダーも失われることです。注意してください。

良い一日を過ごしてください。

ありがとう、Naveen Mettapally。

1
Naveen Mettapally

私はこの問題を一度解決しようとしました、しかし私のすべての研究はActiveXコントロール/プラグインに向かって私を導きました。ブラウザ（とにかく3年前）が印刷設定（部数、用紙サイズ）を変更することを許可したトリックはありません。

私は、ブラウザの印刷ダイアログが表示されたときに「横」を選択する必要があることをユーザに注意深く警告するように努力しました。私はまた、「印刷プレビュー」ページを作成しました。これは、IE6よりはるかにうまく機能しました。私たちのアプリケーションはいくつかのレポートに非常に広いテーブルのデータを持っていました、そして（IE6が2枚のシートの印刷にも対処できなかったので）テーブルが紙の右端からあふれるとき、印刷プレビューはユーザーに明らかにしました。

そしてはい、今でも人々はまだIE6を使用しています。

1
Magnus Smith

これも私のために働いた：

@media print and (orientation:landscape) { … }
0
Navin Rauniyar