如何将PrimeFaces p：dataTable转换为标准h：dataTable（无皮肤），然后将其打印出来

I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?

我想打印 ,所以我使用 ,但我想跳过打印皮肤并使其看起来像。我怎样才能做到这一点?

Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.

此外,是否可以更改打印的纸张方向?我想把它打印成横向而不是肖像。

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

I didn't find any suitable attribute in the <p:printer> tag.

我在标记中找不到任何合适的属性。

Update: sorry, nevermind the <p:printer> can be used on a <h:dataTable> as well, so you can also just answer the second question only.

更新:对不起,没关系, 也可以在上使用,所以你也可以只回答第二个问题。

1 个解决方案

#1

Both qustions are answered with CSS @media print rule. It allows you to specify CSS styles which are specific to printed output. You can embed those rules in a normal CSS stylesheet file or <style> element the usual way.

使用CSS @media打印规则回答这两个问题。它允许您指定特定于打印输出的CSS样式。您可以通常的方式将这些规则嵌入到普通的CSS样式表文件或

I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?

我想打印 ,所以我使用 ,但我想跳过打印皮肤并使其看起来像。我怎样才能做到这一点?

Lookup the classname of the <p:dataTable> and override it in your @media rule:

查找的类名并在@media规则中覆盖它:

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

There are likely more, I don't know it all from top of head, you should be able to check using Firebug or Chrome developer tools what classname is been used and which properties are all been set so that you know which you should reset to 0, none or some other default.

可能还有更多,我不知道这一切,您应该能够使用Firebug或Chrome开发人员工具检查使用了哪个类名以及哪些属性都已设置,以便您知道应该将哪个重置为0,无或其他默认值。

Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait. Use CSS.

此外,是否可以更改打印的纸张方向?我想把它打印成横向而不是肖像。使用CSS。

As per CSS 2.1, you can specify it as follows:

根据CSS 2.1,您可以按如下方式指定它:

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

This has however browser specific impediments, it's not supported in FF and in MSIE <=7. For workarounds, check the accepted answer of this question: Landscape printing from HTML

然而,这具有浏览器特定的障碍,在FF和MSIE <= 7中不支持。有关变通方法,请检查此问题的已接受答案:从HTML进行横向打印

#1