首页 文章

导出PDF中的Primefaces图表

提问于
浏览
3

首先,我必须告诉你,我不是英语为母语的人,所以我希望我能正确解释你的问题 .

以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>
                
<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>

谢谢

2 回答

  • 0

    我不知道是否是解决此问题的最佳方法,但我通常会从图表中获取图像的src属性并将其发送回Managed 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文档 .

  • 2

    此链接可以帮助您,也可以查看PrimeFaces论坛的讨论:http://www.mastertheboss.com/primefaces/export-your-datatable-to-excel-and-pdf-using-primefaces

    (p:dataExporter指定具有“type”属性的导出类型 . 您可以选择“xls”,“pdf”,“csv”和“xml” . )

相关问题