报表开发利器：phantomjs生成PDF ，Echarts图片

　　报表开发利器：phantomjs生成网页PDF ，Echarts报表实战

　　导航：

　　一. 关于phantomjs1.1 什么是phantomjs?

　　（1）一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作须要程序设计实现。

　　（2）提供javascript API接口，即通过编撰js程序可以直接与webkit内核交互，在此之上可以结合java语言等，通过java调用js等相关操作，从而解决了先前c/c++能够比较好的基于webkit开发优质采集器的限制。

　　（3）提供windows、linux、mac等不同os的安装使用包，也就是说可以在不同平台上二次开发采集项目或是手动项目测试等工作。

　　1.2 phantomjs常用API介绍

　　常用外置几大对象

　　常用API

　　注意事项

　　使用总结 ： 主要是java se+js+phantomjs的应用，

　　1.3 使用phantomjs 能做哪些？

　　生成的PDF基本还原了其原先的款式，图片和文字分开了，并非直接截图；有生成PDF相关需求的，可以思索生成使用phantomjs 怎样实现功能；本人有通过Html模板，生成Html页面，然后将此页面上传至FastDfs服务器，然后通过返回的url直接生成此pdf，即完成了html页面一致的pdf生成功能；

　　二. Windows下安装 phantomjs2.1 概述2.1 下载并安装phantomjs测试是否安装成功：三. Linux下 安装 phantomjs3.1 概述3.2 安装过程如下：

　　进入上面后可执行js命令，如果须要退出，则按 Ctrl+C 强制退出

　　解决英文乱码（可选，可碰到此问题再行解决）正常示例：(Windows上显示正常如图：)错误示例:(Linux上显示英文乱码如图：)解决办法：在Linux中执行命令：

　　yum install bitmap-fonts bitmap-fonts-cjk

　　执行此命令后，可能只是英文显示下来了，数字还是会显示空格，如果出现数字显示空格，则把windows所有字体导出Linux中，见下边。

　　导入字体：四. 利用Phantomjs生成Echarts图片4.1 概述： 在Linux 下：

　　WIndows与Linux环境下的区别：①配置好环境变量，因为phantomjs的启动方法，windows是执行exe文件，linux不是，所以配好环境变量后java在本机测试与在Linux下无需做任何更改；②Phantomjs执行生成Echarts图片时，需要引用到 jquery.1.9.1.min.js ,echarts-convert.js, echarts.min.js 以及生成Echarts的js文件。这些js须要引用到，而当布署在Linux中时，生成的js文件在jar包中，不一定能读取到，我们可以通过代码将js文件复制生成到jar包同级目录，然后通过路径加载。路径加载可以用如下代码读取并生成：

　　~~~java

　　/* 将模板生成到指定的位置 判定文件是否存在，如果不存在则创建 */

　　File echartsfile = new File(System.getProperty(“user.dir”) + “\echarts-all.js”);

　　if (!echartsfile.exists()) {

　　FileUtil.file2file(“js/echarts-all.js”, System.getProperty(“user.dir”) + “\echarts-all.js”);

　　}

　　~~~

　　4.2 笔者实现思路：第二步：整理思路：生成须要生成的Echarts的js代码：找到相关Echarts图片模板： Echarts官网使用Framework以及其他技术：将模板+数据生成一个最终js文件；使用Framework为例：将其他的三个js文件放在其他位置上，博主的做法是将这三个放在jar包目录内，但是会存在phantomjs难以读取和执行的情况（就是除开phantomjs的代码可以读取到内容，但phantomjs的执行难以引用读取）。所以博主采取的是先读取下来，再讲到jar包外边进行引用；这样通过路径，在Linux下也可以读取了；读取代码示例：

　　 /* 将模板生成到指定的位置 判断文件是否存在，如果不存在则创建 */

File echartsfile = new File(System.getProperty("user.dir") + "\\echarts-all.js");

if (!echartsfile.exists()) {

FileUtil.file2file("js/echarts-all.js", System.getProperty("user.dir") + "\\echarts-all.js");

}

File jsfile = new File(outPathAndName);

if (!jsfile.exists()) {

FileUtil.string2File(outPathAndName, echartTemplate.getFileContent()); // 将js文件生成到指定的位置

}

File convertfile = new File(System.getProperty("user.dir") + "\\echarts-convert.js");

String echartsPath = System.getProperty("user.dir") + "\\echarts-convert.js";

if (!convertfile.exists()) {

FileUtil.file2file("js/echarts-convert.js", echartsPath);

}

File jqueryfile = new File(System.getProperty("user.dir") + "\\jquery.1.9.1.min.js");

if (!jqueryfile.exists()) {

FileUtil.file2file("js/jquery.1.9.1.min.js", System.getProperty("user.dir") + "\\jquery.1.9.1.min.js");

}

　　重点代码：System.getProperty(“user.dir”) 为 Windows下或则Linux下的当前路径 ，具体可百度其用法。

　　结合早已有的 echarts-convert.js 等文件+ 生成好的带数据的Echarts.js 文件 和 Demo示例代码可以生成出Echarts图片了；我们可以将Echart图片再上传至Fastdfs等图片服务器，就可以领到网路图片url了；当然最后一步视业务需求而定；五. 利用Phantomjs生成PDF文档(HTML转为PDF)5.1 概述5.2 生成原理5.3 扩展思路六.利用Phantomjs+Poi.tl 生成Word文档6.1 概述6.2 思路