Question

我正在使用primeface打印，如下所示

 <ui:define name="content" id="content">
        <h:form id="common_chart_form" prependId="flase">
            <p:growl id="growl" showDetail="true" autoUpdate="true"
                sticky="false" />
                <p:outputLabel id="labelvalue" value="aaaaaaaaaa"/>

                <p:chart id="chart" type="bar"
                    model="#{commonChartController.barModel}" style="height:300px" />

            <p:commandButton value="Print" type="button" icon="ui-icon-print">
                <p:printer target="chart" />
            </p:commandButton>

            <p:commandButton value="Back" action="admin_sales_reports" />
        </h:form>
    </ui:define>

我需要打印图表，但不幸的是它无法打印。然后测试打印目标我试图打印＆＃34;标签值＆＃34;它打印了我在这段代码中做的错误的事情

这是页面的屏幕截图

enter image description here

Answer 1

您可以以更优雅的方式完成此操作，而无需在页面中声明的outputPanel：

Javascript功能：

function print(component){
    var out = document.createElement('div');
    out.appendChild(PF(component).exportAsImage()); 
    var innerHTML =  out.innerHTML;
    var openWindow = window.open('', 'Report', '');
    openWindow.document.write(innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

为图表定义widgetVar：

<p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" />

调用打印功能：

<p:commandLink  id="lnk" onclick="print('chart2')"/>

Answer 2

以下是你如何做到这一点 - 从巴西找到了一个展示它的主题：

1 - 创建一个如下对话框：

copy {
   from zipTree('path/tozip.zip')
   into temporaryDir
}

2 - 使用widgetVar创建图表，如下所示：

<p:dialog widgetVar="outputDialog" showEffect="fade" modal="true" header="Header Name">    
                <p:outputPanel id="output" layout="block" style="width:860px;height:540px"/>    
            </p:dialog>

3 - 创建一个这样的javascript函数：

<p:chart widgetVar="chart1" type="bar" model="#{chartsBean.barModel1}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart3" type="bar" model="#{chartsBean.barModel3}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart4" type="line" model="#{chartsBean.lineModel1}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart5" type="line" model="#{chartsBean.lineModel2}" style="height:300px;width:800px;"/>
            <p:spacer height="40px"/>
            <p:chart widgetVar="chart6" type="line" model="#{chartsBean.lineModel3}" style="height:300px;width:800px;"/>

4 - 创建菜单栏，命令按钮或任何其他调用print（）函数的方法。这是我的方式：

function print() {
                    $('#output').empty().append(PF('chart1').exportAsImage());   
                    $('#output').append(PF('chart2').exportAsImage());
                    $('#output').append(PF('chart3').exportAsImage());
                    $('#output').append(PF('chart4').exportAsImage());
                    $('#output').append(PF('chart5').exportAsImage());
                    $('#output').append(PF('chart6').exportAsImage());

                    //PF('outputDialog').show();    
                    var innerHTML =  $('#output')[0].innerHTML;
                    if (innerHTML != null){
                        var openWindow = window.open("", 'Report', "");                                
                        openWindow.document.write(innerHTML);
                        openWindow.document.close();
                        openWindow.focus();
                        openWindow.print();
                        openWindow.close();    
                    }
                }

Answer 3

只放这个（onclick =＆＃34; print（）;＆＃34;）。

<p:commandButton value="Print" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px" onclick="print();"/>

多数民众赞成。

Answer 4

根据此post，无法打印图表。最后一篇文章给出了解决方案。

Answer 5

您可以使用脚本将图表作为图像导出到与图表具有相同高度且z-index属性值小于图表的面板。 EXP：

<h:form>    
    <p:commandButton value="Print" style="margin:10px;"
    onclick="$('#output').empty().append(PF('chart').exportAsImage());">        
          <p:printer  target="output"></p:printer>
     </p:commandButton>
</h:form>
<p:outputPanel id="output" layout="block"
     style="position:absolute;height:300px;z-index:1" />
<p:chart widgetVar="chart" type="bar" model="#{bean.barModel}"
     style="height:300px;z-index:1000;background:#fff"></p:chart>

PrimeFaces打印不适用于p：chart

5 个答案: