导出Echarts图,并且存储为pdf格式。 发现Echarts好像是只支持png和jpg的导出,不支持pdf导出。我就想着只能够将png在后台转为pdf了。
首先介绍一下jsp界面的代码。
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方式。
@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流的东西,就不详细介绍了。希望能对大家有所帮助。