PrimeFaces print doesn't work with p:chart

问题:

I'm using primeface print just like below

 <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>

i need to print the chart but unfortunately it cannot print. then to test the print target i tried to print the "labelvalue" it printed what is the wrong thing that im doing in this code

this is the screen shot of the page

回答1:

You can do it in a more elegant way, without the need of the outputPanel declared in the page:

1. Javascript function:

   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();
   }
   

2. Define widgetVar for chart:

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

3. Call the print function:

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

回答2:

Here is how you do it - found a thread from Brazil that showed it:

1 - Create a dialog like this:

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

2 - Create your charts with a widgetVar like this:

<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;"/>

3 - Create a javascript function like this:

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();    
                    }
                }

4 - Create a menubar, command button, or any other way of invoking the print() function. Here is my way:

<p:menubar>
            <p:menuitem value="Print" icon="ui-icon-print" action="javascript.void(0);" onclick="print();"/>
            <p:menuitem value="Email" icon="ui-icon-mail-closed" action="javascript.void(0);" onclick="alert('email');"/>
        </p:menubar>

回答3:

According to this post, it's not possible to print a chart. A solution is given in the last post.

回答4:

You can use script to export chart as image to a panel which has same height with chart and z-index property value less than chart. 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>

回答5:

Only put this (onclick="print();").

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

Thats it.