如何将 PrimeFaces p:dataTable 转换为标准 h:dataTable（无皮肤）然后打印答案

【问题标题】：How to convert PrimeFaces p:dataTable to standard h:dataTable (without skin) and then print it如何将 PrimeFaces p:dataTable 转换为标准 h:dataTable（无皮肤）然后打印
【发布时间】：2011-10-07 06:22:59
【问题描述】：

我想打印<p:dataTable>，所以我使用<p:printer>，但我想跳过打印皮肤，让它看起来像<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>，所以你也可以只回答第二个问题。

【问题讨论】：

标签： java jsf primefaces

【解决方案1】：

两个问题都用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，您可以按如下方式指定：

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

然而，这有浏览器特定的障碍，它在 FF 和 MSIE Landscape printing from HTML

【讨论】：

hm 不错的答案真的很感谢，但我还有一个 :) 。当我在屏幕上有很多信息时，它只打印一页，其他信息都丢失了。你知道如何解决这个问题吗？