`
cuiyadll
  • 浏览: 201540 次
文章分类
社区版块
存档分类
最新评论

Echarts导出为pdf格式

阅读更多
[html] view plain copy
导出Echarts图,并且存储为pdf格式。 <span style="background-color: rgb(255, 255, 255); font-family: "microsoft yahei";">发现Echarts好像是只支持png和jpg的导出,不支持pdf导出。我就想着只能够将png在后台转为pdf了。</span> 
首先介绍一下jsp界面的代码。


[html] view plain copy
var thisChart = echarts.init(document.getElementById('myChart')); 
$('#activeResourcesExportBtn').on('click',function(){   
    var chartExportUrl = 'isms/activeResource/export.do'; 
    var picBase64Info = thisChart.getDataURL();//获取echarts图的base64编码,为png格式。                                                       
    $('#chartForm').find('input[name="base64Info"]').val(picBase64Info);//将编码赋值给输入框 
    $('#chartForm').attr('action',chartExportUrl).attr('method', 'post');//设置提交到的url地址                                                  
    $('#chartForm').attr('action',chartExportUrl).attr('method', 'post');//设置提交方式为post 
    $('#chartForm').submit(); 
}); 
 
<form id="chartForm" style="display:none"> 
    <input id="imageValue" name="base64Info" type="text" maxlength="50000"/> 
</form> 
<div id="myChart" style="width:auto;height:500px;display:none" class="myChart"></div> 
上面的前端代码主要的作用是获取echarts图的base64编码,然后把值赋给一个input输入框,通过form表单提交到后台。下面是后台的代码。
跟转载的,我有自己修改一些。将文件下载输出的这一块,改成ResponseEntity方式。


[html] view plain copy
@Controller 
@RequestMapping("/performance") 
public class ExportPdfController { 
    private static final Logger LOGGER = LoggerFactory.getLogger(ExportPdfController.class); 
 
    @RequestMapping(value = "export", method = RequestMethod.POST) 
    @ResponseBody 
    public ResponseEntity chartExport(HttpServletResponse response, String base64Info, HttpServletRequest request) throws IOException { 
        String newFileName; 
        newFileName = "统计图" + System.currentTimeMillis() + ".pdf"; 
        String newPngName = newFileName.replaceFirst(".pdf", ".png"); 
        String exportFilePath = "d:/test"; 
        base64Info = base64Info.replaceAll(" ", "+"); 
        BASE64Decoder decoder = new BASE64Decoder(); 
        String[] arr = base64Info.split("base64,"); 
        byte[] buffer; 
        try { 
            buffer = decoder.decodeBuffer(arr[1]); 
        } catch (IOException e) { 
            throw new RuntimeException(); 
        } 
        OutputStream output = null; 
        try { 
            output = new FileOutputStream(new File(exportFilePath + newPngName));//生成png文件 
            output.write(buffer); 
            output.flush(); 
            output.close(); 
        } catch (UnsupportedEncodingException e) { 
            e.printStackTrace(); 
        } 
        Pdf(exportFilePath + newPngName, exportFilePath + newFileName); 
        File f = new File(exportFilePath + newPngName); 
        if (f.exists()) { 
            f.delete(); 
        } 
 
        try { 
            byte[] fileBytes = FileUtils.readFileToByteArray(new File(exportFilePath + newFileName)); 
            HttpHeaders headers = new HttpHeaders(); 
            String fileName = newFileName; 
            if (request.getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0) { 
                fileName = URLEncoder.encode(fileName, "UTF-8"); 
            } else { 
                fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1"); 
            } 
            headers.setContentDispositionFormData("attachment", fileName); 
            headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); 
            headers.setPragma("public"); 
            headers.setCacheControl("max-age=0"); 
            return new ResponseEntity<>(fileBytes, headers, HttpStatus.OK); 
        } catch (IOException e) { 
            LOGGER.error("IOException:", e); 
            return new ResponseEntity<>(null, HttpStatus.NO_CONTENT); 
        } 
 
    } 
 
    //通过png文件来生成pdf文件 
    public File Pdf(String imagePath, String mOutputPdfFileName) { 
        Document doc = new Document(PageSize.A4, 20, 20, 20, 20); 
        try { 
            PdfWriter writer = PdfWriter.getInstance(doc, new FileOutputStream(mOutputPdfFileName)); 
            doc.open(); 
            doc.newPage(); 
            Image png1 = Image.getInstance(imagePath); 
            float heigth = png1.getHeight(); 
            float width = png1.getWidth(); 
            int percent = this.getPercent2(heigth, width); 
            png1.setAlignment(Image.MIDDLE); 
            png1.setAlignment(Image.TEXTWRAP); 
            png1.scalePercent(percent + 3); 
            doc.add(png1); 
            doc.close(); 
        } catch (FileNotFoundException e) { 
            e.printStackTrace(); 
        } catch (DocumentException e) { 
            e.printStackTrace(); 
        } catch (IOException e) { 
            e.printStackTrace(); 
        } 
 
        File mOutputPdfFile = new File(mOutputPdfFileName); 
        if (!mOutputPdfFile.exists()) { 
            mOutputPdfFile.deleteOnExit(); 
            return null; 
        } 
        return mOutputPdfFile; 
    } 
 
    private int getPercent2(float h, float w) { 
        int p = 0; 
        float p2 = 0.0f; 
        p2 = 530 / w * 100; 
        p = Math.round(p2); 
        return p; 
    } 
 
    //输入流读取到输出流 
    private void copy(BufferedInputStream input, BufferedOutputStream outputString) { 
        byte[] but = new byte[1024]; 
        try { 
            while (input.read() != -1) { 
                int by = input.read(but); 
                outputString.write(but, 0, by); 
                outputString.flush(); 
            } 
        } catch (IOException e) { 
            e.printStackTrace(); 
        } 
    } 


面的代码是controller层的代码,也是后台主要的处理逻辑。在使用代码之前应该倒入itext包,应为是用itex来生成pdf文件。大部分的代码都是io流的东西,就不详细介绍了。希望能对大家有所帮助。
分享到:
评论

相关推荐

    spreadjs_集成 Echarts 并导出 PDFdemo.zip

    `gc.spread.sheets.pdf.14.1.1.min.js` 提供了 PDF 导出功能,使得用户可以将 SpreadJS 中的数据和格式化内容导出为 PDF 文件,便于保存和打印。`gc.spread.excelio.14.1.1.min.js` 则支持 Excel 文件的导入和导出,...

    echarts图标生成pdf所需文件

    在IT行业中,生成数据可视化报告并将其导出为PDF格式是一种常见的需求,特别是在数据分析和报表展示的场景下。本文将详细讲解如何利用ECharts、html2canvas和jspdf这三个JavaScript库来实现Echarts图表的PDF生成。 ...

    echarts图表导出到excel

    echarts图表导出到excel中的解决方法,做个备忘录,以防忘记

    Java 实现 FusionCharts 图表导出图片或PDF文件功能实例源码

    本文将深入探讨如何使用Java实现FusionCharts图表的导出功能,包括导出为图片和PDF文件。 首先,要实现这个功能,你需要在项目中引入FusionCharts的Java库。FusionCharts提供了Java SDK,通过它我们可以与...

    java 前台数据和echarts图表导出为word文件的jar

    本话题将深入探讨如何利用Java和Echarts将前台数据与图表导出为Word文件,以及涉及到的关键库和技术。 首先,我们需要理解Java中导出Word文档的主要库Apache POI。Apache POI是Java社区中广泛采用的API,它允许...

    C#导出导入excel或Pdf

    接下来,我们讨论C#导出PDF。PDF(Portable Document Format)是一种通用的文件格式,用于保持文档的原始布局和样式。在C#中,有多个库可以生成PDF,例如iTextSharp、PDFSharp和Syncfusion Essential PDF等。这些库...

    Vue如何将页面导出成PDF文件

    在需要导出PDF的Vue组件中,你需要导入并使用这个插件,并在模板中添加一个按钮来触发导出操作。例如: ```html &lt;div id="pdfPrint"&gt; &lt;!-- 触发getPdf方法 --&gt; &lt;el-button @click="getPdf('#pdfPrint')"&gt;保存...

    vue3 html(含base64图片、echarts代码)导出pdf(不分页、分页)

    vue3 html(含base64图片、echarts代码)导出pdf

    vue3 html(含base64图片、echarts代码)导出pdf(页面部分)

    vue3 html(含base64图片、echarts代码)导出pdf(页面部分)

    Highcharts在Java后台导出图片到PDF和EXCEL文件中示例代码

    Highcharts在Java后台导出图片到PDF和EXCEL文件中示例代码,程序放到MyEclipse8.6中编译后可直接放到Tomcat6及以上版本运行,程序中含有jar包,下载后不用操心到处找jar包,在MyEclipse8.6里建立普通的Web工程就可以...

    easypoi 导出word并插入echart图片和文件

    在本场景中,我们关注的是如何使用Easypoi导出Word文档,并且在这个文档中插入Echarts生成的图表以及附加文件。Echarts是一个流行的JavaScript数据可视化库,它提供了丰富的图表类型和强大的交互功能,常用于网页...

    echarts图表及列表文字结合导出word文档.doc

    同时,Echarts也提供了将图表导出为图片、PDF、Word文档等多种格式的功能。本文将介绍如何使用Echarts图表结合列表文字导出Word文档。 Echarts图表的基本概念 Echarts图表是一种基于JavaScript的数据可视化图表库...

    java后台生成echarts图表

    `echarts-java` 是一个专为 Java 开发者设计的工具库,它允许我们在 Java 后台生成 ECharts 图表,而无需依赖浏览器环境。这个库通常会借助 PhantomJS,这是一个无头浏览器,可以执行JavaScript并渲染网页内容。...

    echartconvert脚本代码包

    - 数据转换工具:将非ECharts友好的数据格式转换为适合ECharts的JSON格式。 - 图表配置转换:帮助用户将现有的图表配置转换为新的格式或风格。 - 导出/导入:可能提供导出图表为图片或导入已有的配置文件的功能。 - ...

    java代码转pdf

    Java代码将Word转换为PDF是一种常见的需求,尤其是在企业级应用中,为了统一格式或方便打印,经常需要将Word文档转换成PDF。在这个压缩包中,包含的资源是用于实现这一功能的关键组件。以下是关于这个话题的详细解释...

    java使用phantomjs把echarts转图片 静态资源

    ECharts通过JavaScript对象(JSON格式)定义图表的配置项,生成对应的图表。 然后,我们引入PhantomJS。PhantomJS是一个基于Webkit的无头浏览器,它可以像正常浏览器一样加载网页,但不会显示用户界面,这使得它...

    Java后台批量生产echarts图表并保存图片

    通过批量生成echarts图表,并将其保存到图片中,可以方便地将数据结果进行可视化,并且可以导出到其他系统中。 六、技术要点 1. echart图表生成:使用echarts提供的js文件生成图表,并将其保存到图片中。 2. ...

    Echarts-4.0.4-官方实例-所有2D图表

    - 导出与打印:支持将图表导出为图片或PDF,方便分享和打印。 总之,ECharts 4.0.4的2D图表实例是开发者掌握ECharts的宝贵资源,它涵盖了从基础到高级的各种示例,能够帮助开发者快速上手并实现复杂的数据可视化...

    Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图

    这个例子展示了如何使用Echarts创建一个简单的折线图,但实际应用中,你可以根据需要从后端获取动态数据,用Mybatis查询数据库,然后将数据转换为Echarts理解的格式,最终渲染出折线图、饼图或柱状图。 总的来说,...

    Freemarker导出word示例,包括jfreechart图表

    4. 将生成的图表转换为图像格式(例如JPEG或PNG),以便于插入到Word文档中。 接下来,我们将这些图表图像与Freemarker模板结合。在模板中,我们可以使用类似于HTML的`&lt;img&gt;`标签,将图片的路径作为`src`属性,这样...

Global site tag (gtag.js) - Google Analytics