Echarts导出为pdf格式

阅读更多

[html] view plain copy
导出Echarts图，并且存储为pdf格式。 发现Echarts好像是只支持png和jpg的导出，不支持pdf导出。我就想着只能够将png在后台转为pdf了。 
首先介绍一下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(); 
}); 
 

 
     

 

 
上面的前端代码主要的作用是获取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流的东西，就不详细介绍了。希望能对大家有所帮助。