导出 PDF 中的 Primefaces 图表

Question

首先我要告诉你，我不是以英语为母语的人，所以我希望我能正确地解释我的问题。

我在以 PDF 格式导出条形图时遇到了一些问题。我正在使用 PrimeFaces 3.5 和 Tomcat v7。

经过一番研究，我了解到，不能直接以 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>

谢谢

Answer 1

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

例子：

在你的 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 文档。

Answer 2

此链接可能对您有所帮助，还可以查看 PrimeFaces 论坛的讨论：http://www.mastertheboss.com/primefaces/export-your-datatable-to-excel-and-pdf-using-primefaces

（p:dataExporter 使用“type”属性指定导出类型。您可以在“xls”、“pdf”、“csv”和“xml”之间进行选择。）