Question

我想将我的primefaces饼图导出为图像，然后我跟着Primefaces Showcase这样做了。问题是当我单击导出按钮时，窗口冻结并且图表不会导出为图像，因此我无法右键单击并保存它。我已尝试过PrimeFaces: export chart as picture和.Cannot export chart as image in Primefaces?中提供的解决方案，但无法解决我的问题。以下是我的代码：

    <p:panelGrid id="subPanelGrid" columns="1" style="width:100%" layout="grid">
    <table style="width: 50%;">
        <tr>
            <td><p:column>
                    <div dir="ltr" class="chartContainer">
                        <p:chart type="pie" model="#{myExample.myPieChart}" style="width:600px;height:340px" widgetVar="chart" />

                        <p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportChart()" />

                        <p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Chart as an Image" resizable="false">
                            <p:outputPanel id="output" layout="block" style="width:600px;height:340px" />
                        </p:dialog>
                    </div>
                </p:column></td>
        </tr>
    </table>
</p:panelGrid>

这是我的剧本：

<script type="text/javascript">
                function exportChart() {
                    $('#output').empty()
                            .append(PF('chart').exportAsImage());
                    PF('dlg').show();
                }
            </script>

先谢谢你。

Answer 1

是的，这是primefaces的一个经常出现的问题...如果您使用的是primefaces 5或+，则可以尝试（因为您的网格不在表格中）

function exportChart() {
  $('#output').empty().append(chart.exportAsImage());
  dlg.show();
}

它还有其他方法，如此处PrimeFaces: export chart as picture

所述

根据@CycDemo的建议，尝试以下操作（我没有尝试过，但是人们似乎对此进行了投票）：

下载jquery.js和html2canvas.js。如果您使用的是maven，只需在依赖项中添加到pom.xml中即可：

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>html2canvas</artifactId>
  <version>0.4.1</version>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>2.1.4</version>
</dependency>

然后在您的.xhtml

中

<h:head>
    <h:outputScript library="primefaces" name="#{request.contextPath}/js/jquery.min.js"/>
    <script type="text/javascript" src="#{request.contextPath}/js/html2canvas.js"></script>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
</h:head>
<h:body>
    <h:form id="imageFrom">
        <script type="text/javascript">
            function saveAsImage() { 
                html2canvas($("#imageFrom\\:barChart"), {
                    onrendered: function(canvas) {
                        theCanvas = canvas;
                        document.body.appendChild(canvas);
                        $("#imageFrom\\:output").append(canvas);
                    }
                });
            }
        </script>
        <p:chart type="bar" id="barChart" model="#{chartView.barModel}" style="width:500px;height:300px;"/>     
        <p:commandButton id="btnSave" value="Export" onclick="saveAsImage();PF('eventDialog').show();"/>
        <p:dialog id="eventDialog" widgetVar="eventDialog" resizable="false" width="520" height="300" appendToBody="true">
            <p:outputPanel id="output"/>
        </p:dialog>
    </h:form>
</h:body>

希望它会有所帮助：）

Answer 2

当尝试将饼图导出到图像时，我会遇到相同的问题（其他类型的图表，例如条形图或折线图都没有问题）。我还注意到该错误仅在属性'ShowDataLabels'设置为true时发生。

https://github.com/primefaces/primefaces/issues/920

中有一个未解决的问题

Primefaces饼图导出按钮无法正常工作

2 个答案: