Primefaces图表在导出PDF中的应用

3
首先,我要告诉您我不是英语母语者,希望我能正确地解释我的问题。
我在使用PrimeFaces 3.5和Tomcat v7时,遇到了导出柱状图至PDF的问题。
经过一些调查,我了解到,不能直接将图表导出为PDF。但好像有一种方法可以将图表保存为像png或jpeg这样的图片。
我找到了这个网址:http://www.primefaces.org/showcase-labs/ui/chartExport.jsf,但这只是一个屏幕截图方式,我想把它保存下来以便在我的pdf报告中使用。
我也看到了JFreeChart的解决方案,但我真的想保持同样的图表在我的html页面和我的PDF报告中。
以下是我的代码:
<h:form id="finalreport">
            <c:if test="#{treeBean.finalPrintReport.create == 1}">
                <h1>
                    <h:outputText value="#{treeBean.finalPrintReport.namefinalreport}"
                        escape="false" />
                </h1>
                <p:dataTable id="dataTableReport" var="row"
                    value="#{treeBean.finalPrintReport.allData}" paginator="true"
                    rows="10">
                    <p:columns value="#{treeBean.finalPrintReport.column}" var="column"
                        columnIndexVar="colIndex">
                        <f:facet name="header">
                            <h:outputText value="#{column}" />
                        </f:facet>

            <h:outputText value="#{row[colIndex]}" />
                    </p:columns>
                </p:dataTable>
                <br />

                <h:commandLink>
                    <p:graphicImage value="/images/pdf.png" />
                    <p:dataExporter type="pdf" target="dataTableReport"
                        fileName="Report" preProcessor="#{treeBean.createPDF}" />
                </h:commandLink>
            </c:if>
        </h:form>
        <!-- Graph -->
        <h:form id="graph">
            <c:if test="#{treeBean.finalPrintReport.create == 1}">
                <c:if test="#{treeBean.finalPrintReport.propertyOfFinalReport.graph == true}">
                    <p:barChart id="basic" value="#{treeBean.chartbar2d}"
                        legendPosition="ne" title="Basic Bar Chart" 
                        style="height:300px" />
                </c:if> 
            </c:if>
        </h:form>

谢谢


请查看此教程:http://blog.hatemalimam.com/export-primefaces-charts-to-pdf/ - Hatem Alimam
2个回答

2

我不知道这是否是解决问题的最佳方法,但通常我会获取从图表导出的图像的src属性,并将其发送回托管的Bean。在那里,您可以创建一个新的Image并使用您喜欢的方式导出。

示例:

在您的MB中

/** String Base64 that represents the image bytes */
private String chartImageSrcBase64; 

页面

<h:inputHidden id="chartImageSrc" 
               value="#{myMB.chartImageSrcBase64}" />

<p:remoteCommand name="exportToPdfRemoteCommand" 
                 action="#{myMB.exportPdf}">

<p:commandButton type="button" 
                 value="Export to PDF"  
                 onclick="exportToPdf()"/>  

exportToPdf()是您页面中的自定义JS功能

function exportToPdf() {
    //get your image 
    var imageElement = PF('chart').exportAsImage();

    //get the value of the 'src' attribute of this object and fill the hidden input
    $("#yourForm\\:chartImageSrc").val($(imageElement).attr("src"));

    //send the image (converted in text) to your MB
    exportToPdfRemoteCommand(); 
}

一旦在服务器上,您可以将基于文本的图像再次转换为真实的图像,并使用您喜欢的方式来构建PDF文档。


0

1
谢谢您的回答。但是我认为dataExporter只适用于dataTable。 - user2664237

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接