2011-07-17 3 views
7

<p:dataTable>を印刷したいので<p:printer>を使用しますが、スキンを印刷しないようにして、<h:dataTable>のようにします。 。これどうやってするの?PrimeFaces p:dataTableを標準のh:dataTable(スキンなし)に変換する方法

また、用紙の向きを変えることはできますか?私は肖像画の代わりに風景として印刷したいと思います。

<h:outputLink id="lnk" value="#"> 
    <p:printer target="tbl" /> 
    <p:graphicImage value="http://www.primefaces.org/showcase/images/print.png" /> 
</h:outputLink> 

<p:printer>タグには適切な属性が見つかりませんでした。


更新:申し訳ありませんが、用事<p:printer>も同様<h:dataTable>で使用することができますので、あなたもちょうどのみ2番目の質問に答えることができます。

答えて

7

両方の質問には、CSS @media print ruleと回答します。印刷出力に固有のCSSスタイルを指定することができます。これらのルールは通常のCSSスタイルシートファイルまたは<style>要素に埋め込むことができます。


私は<p:dataTable>を印刷したいので、私は<p:printer>を使用しますが、私は肌を印刷スキップして、それが<h:dataTable>のように見えるようにしたいです。これどうやってするの?

検索<p:dataTable>のクラス名とあなたの@mediaルールでそれをオーバーライドします。おそらくもっとあります

@media print { 
    .primeFaces-dataTable-className { 
     border: 0; 
     margin: 0; 
     padding: 0; 
     background: none; 
     color: black; 
    } 
} 

、私は頭の上からそれをすべて知っていない、あなたのことができるようになりFirebugまたはChromeデベロッパーツールを使用して、どのクラス名が使用されているか、どのプロパティがすべて設定されているかを確認して、0,noneなどのデフォルトにリセットする必要があるかどうかを確認します。


また、印刷の用紙の向きを変更することは可能でしょうか?私は肖像画の代わりに風景として印刷したいと思います。 CSSを使用してください。次のように

CSS 2.1を1として、あなたはそれを指定することができます。

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

しかしこれは、ブラウザの特定の障害を持っている、それがFFにし、MSIE < = 7でサポートされていません。回避策については、この質問の回答を確認してください:Landscape printing from HTML

+0

wow。これは良いことを知っている –

+0

hm素敵な答えは本当にthxしかし私はもう1つ:)。画面上にたくさんの情報があると、1ページだけ印刷され、他の情報は失われます。あなたはこの問題をどのように修正するか知っていますか? – hudi

関連する問題