Jsf PrimeFaces打印不'；t与p:chart一起工作

我正在使用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>

我需要打印图表，但不幸的是它无法打印。然后为了测试打印目标，我尝试打印“labelvalue”，它打印了我在代码中所做的错误是什么

这是页面的屏幕截图

---

根据这一点，无法打印图表。在上一篇文章中给出了一个解决方案。

以下是您如何做到这一点的-找到了一个来自巴西的线程，显示了它：

1-创建如下对话框：

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

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

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-创建菜单栏、命令按钮或任何其他调用print（）函数的方法。这是我的方式：

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

---

您可以使用脚本将图表作为图像导出到面板，该面板的高度与图表相同，且z索引属性值小于图表。经验：

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

---

您可以以更优雅的方式进行操作，而无需页面中声明的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();
}

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

为图表定义widgetVar：

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

调用打印函数：

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

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

仅放置此项（onclick=“print（）；”）

---

就是这样。

当你尝试打印图表时，你会收到什么信息？打印预览中没有任何信息我看不到任何图表，但图表在那里。如果你需要，我可以发布页面截图。我只是发布了页面。真的吗。那我就得为另一个解决方案提供资金，不是吗？。无论如何，谢谢你的回答！谢谢你，伙计！