如何将PrimeFaces p:dataTable转换为标准h:dataTable(无皮肤),然后打印出来

Question

我想打印一个<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>,所以你也可以只回答第二个问题.

Answer 1

这两个问题都用CSS @media print规则来回答.它允许您指定特定于打印输出的CSS样式.您可以<style>通常的方式将这些规则嵌入到普通的CSS样式表文件或元素中.

我想打印一个<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 <= 7中不支持.有关变通方法,请检查此问题的已接受答案:从HTML进行横向打印