Question

我正在尝试打印PrimeFaces图表。我已经跟随了示范here和答案here，但我认为甚至无法将我的图表渲染为图像。这实际上有效吗？

这是我的页面：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="./main.xhtml">
        <ui:define name="top">
        </ui:define>
        <ui:define name="content">
            <script type="text/javascript">
                function ext() {
                    this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
                    this.cfg.highlighter.useAxesFormatters = true;
                    this.cfg.highlighter.tooltipAxes = 'y';
                }
                function extpie() {
                    this.cfg.highlighter.show = true;
                    this.cfg.highlighter.showTooltip = true;
                    this.cfg.highlighter.formatString = '%s = %i';
                    this.cfg.highlighter.useAxesFormatters = false;
                    this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
                }

            </script>
            <script type="text/javascript">
                function print() {
                    $('#output').empty().append(PF('chart1').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();
                    }
                }
            </script>
        </ui:define>
        <ui:define name="bottom">
            <h:form id="form">
                <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="#{profitpage.categoryModel}" style="height:300px;width:800px;"/>
                <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>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

我的截图：

任何帮助都会受到高度赞赏。

将p：图表转换为图片失败

0 个答案: