Question

我目前正在尝试调用JS脚本，以便从primefaces图表组件中导出图表。问题是base64str变量似乎是null，并且由于某种原因没有调用用于填充此值的负责脚本：

xhtml代码：

<p:chart id="chart" type="line"  widgetVar="chart" model="#{cont.lineModel}"  style="height:550px;width:1800px">
           <p:ajax event="itemSelect" listener="#{cont.itemSelect}" update="growl" />                             
    </p:chart>
    <p:commandButton id="exp" value="Export" icon="ui-icon-extlink"
            onclick="exportChart();" actionListener="#{cont.submittedBase64Str}" 
           />
        <h:inputHidden id="b64" value="#{cont.base64Str}" />                     


<script type="text/javascript">
        function exportChart() {
        img = chart.exportAsImage();
        document.getElementById('hform:b64').value = img.src;

        }
    </script>

控制器：

public void submittedBase64Str(ActionEvent event){
// You probably want to have a more comprehensive check here. 
// In this example I only use a simple check
if(base64Str.split(",").length > 1){
    String encoded = base64Str.split(",")[1];
    byte[] decoded = org.apache.commons.codec.binary.Base64.decodeBase64(encoded);
    // Write to a .png file
    try {
        RenderedImage renderedImage = ImageIO.read(new ByteArrayInputStream(decoded));
        ImageIO.write(renderedImage, "png", new File("D:\\out.png")); 
    } catch (IOException e) {
        e.printStackTrace();
    }
}

}

由于

Answer 1

将您的onclick属性更改为onstart。

    <p:commandButton id="exp" value="Export" icon="ui-icon-extlink"
  onstart="exportChart();" actionListener="#{cont.submittedBase64Str}" />

那应该调用JS函数。

修改

此外，您需要在函数中定义img和chart。

Answer 2

chart对象是PrimeFaces JS小部件。您定义widgetVar：

<p:chart ... widgetVar="chart"

然后您可以在JS代码中获取图表对象，如下所示：

PF('chart')

自PrimeFaces 4.0以来，您需要使用PF函数来获取小部件。

作为旁注，最好将img变量设为本地变量而不是全局变量：

var img = chart.exportAsImage();

现在img仅在函数范围内定义。

JS代码没有执行

2 个答案: