報表開發(fā)神器：phantomjs生成網(wǎng)頁PDF ，Echarts報表實戰(zhàn)

導航：

• 報表開發(fā)神器：phantomjs生成網(wǎng)頁PDF ，Echarts報表實戰(zhàn)
• • 一. 關(guān)于phantomjs
  • • 1.1 什么是phantomjs?
    • 1.2 phantomjs常用API介紹
    • 1.3 使用phantomjs 能做什么？
  • 二. Windows下安裝 phantomjs
  • • 2.1 概述
    • 2.1 下載并安裝phantomjs
  • 三. Linux下 安裝 phantomjs
  • • 3.1 概述
    • 3.2 安裝過程如下：
  • 依次執(zhí)行以下命令：
  • 四. 利用Phantomjs生成Echarts圖片
  • • 4.1 概述：
    • 4.2 筆者實現(xiàn)思路：
  • 五. 利用Phantomjs生成PDF文檔(HTML轉(zhuǎn)為PDF)
  • • 5.1 概述
    • 5.2 生成原理
    • 5.3 擴展思路
  • 六.利用Phantomjs+Poi.tl 生成Word文檔
  • • 6.1 概述
    • 6.2 思路

一. 關(guān)于phantomjs

1.1 什么是phantomjs?

（1）一個基于webkit內(nèi)核的無頭瀏覽器，即沒有UI界面，即它就是一個瀏覽器，只是其內(nèi)的點擊、翻頁等人為相關(guān)操作需要程序設(shè)計實現(xiàn)。
（2）提供javascript API接口，即通過編寫js程序可以直接與webkit內(nèi)核交互，在此之上可以結(jié)合java語言等，通過java調(diào)用js等相關(guān)操作，從而解決了以前c/c++才能比較好的基于webkit開發(fā)優(yōu)質(zhì)采集器的限制。
（3）提供windows、linux、mac等不同os的安裝使用包，也就是說可以在不同平臺上二次開發(fā)采集項目或是自動項目測試等工作。

1.2 phantomjs常用API介紹

常用內(nèi)置幾大對象

• var system=require(‘system’); //獲得系統(tǒng)操作對象，包括命令行參數(shù)、phantomjs系統(tǒng)設(shè)置等信息
• var page = require(‘webpage’); //獲取操作dom或web網(wǎng)頁的對象，通過它可以打開網(wǎng)頁、接收網(wǎng)頁內(nèi)容、request、response參數(shù)，其為最核心對象。
• var fs = require(‘fs’); //獲取文件系統(tǒng)對象，通過它可以操作操作系統(tǒng)的文件操作，包括read、write、move、copy、delete等。

常用API

• page.onLoadStarted = function() {}//當page.open調(diào)用時，回首先執(zhí)行該函數(shù)，在此可以預置一些參數(shù)或函數(shù)，用于后邊的回調(diào)函數(shù)中
• page.onResourceError = function(resourceError) {} //page的所要加載的資源在加載過程中，出現(xiàn)了各種失敗，則在此回調(diào)處理
• page.onResourceRequested = function(requestData, networkRequest) {} //page的所要加載的資源在發(fā)起請求時，都可以回調(diào)該函數(shù)
• page.onResourceReceived = function(response) {} //page的所要加載的資源在加載過程中，每加載一個相關(guān)資源，都會在此先做出響應(yīng)，它相當于http頭部分, 其核心回調(diào)對象為response，可以在此獲取本次請求的cookies、userAgent等
• page.onConsoleMessage = function (msg) {}//欲在執(zhí)行web網(wǎng)頁時，打印一些輸出信息到控制臺，則可以在此回調(diào)顯示。
• page.onAlert = function(msg) {} //phantomjs是沒有界面的，所以對alert也是無法直接彈出的，故phantomjs以該函數(shù)回調(diào)在page在執(zhí)行過程中的alert事件
• page.onError = function(msg, trace) {} //當page.open中的url，它自己（不包括所引起的其它的加載資源）出現(xiàn)了異常，如404、no route to web site等，都會在此回調(diào)顯示。
• page.onUrlChanged = function(targetUrl) {} // 當page.open打開的url或是該url在打開過程中基于該URL進行了跳轉(zhuǎn)，則可在此函數(shù)中回調(diào)。
• page.onLoadFinished = function(status){} // 當page.open的目標URL被真正打開后，會在調(diào)用open的回調(diào)函數(shù)前調(diào)用該函數(shù)，在此可以進行內(nèi)部的翻頁等操作
• page.evaluate(function(){});// 在所加載的web page內(nèi)部執(zhí)行該函數(shù)，像翻頁、點擊、滑動等，均可在此中執(zhí)行
• page.render("");//將當前page的現(xiàn)狀渲染成圖片，輸出到指定的文件中去。

注意事項

• 區(qū)分phantomjs的對象和打開的web page的對象，如document、window等，兩者都有，在調(diào)用page.evaluate和不調(diào)用的時候，注意區(qū)分二者的范圍，容易在調(diào)試時出現(xiàn)很多的問題，且不好發(fā)現(xiàn)。

• page.injectJs和page.includeJs的區(qū)別，前者側(cè)重本地的js文件，與libraryPath掛購，后者側(cè)重網(wǎng)絡(luò)js文件，尤其在引入jquery等第三方庫時，會經(jīng)常遇到。

• 編碼問題，兩個重要參數(shù)，–output-encoding,–script-encoding，前者為輸出編碼，后者為所使用js、參數(shù)配置文件的編碼，為方便起鑒，建議均采用utf-8編碼，并注所應(yīng)用到的目標文件的編碼，以免引起很不可思議的異常，又無從查起。

使用總結(jié) ： 主要是java se+js+phantomjs的應(yīng)用，

• 編寫好js腳文程序，預留出所有可配置參數(shù)，并提供json文件傳輸相關(guān)參數(shù)。

• 通過java程序，定義相關(guān)參數(shù)并生成對應(yīng)的json文件。

• 通過java命令行調(diào)用API，調(diào)用phantomjs命令，并傳入js、配置文件路徑，從而開啟爬蟲。

• 首先采集關(guān)鍵詞的搜索頁的鏈接集合，最后統(tǒng)一去遍歷采集具體的對象網(wǎng)頁。

1.3 使用phantomjs 能做什么？

• 能夠通過網(wǎng)頁url，獲取到此網(wǎng)頁的數(shù)據(jù)，進行數(shù)據(jù)采集，網(wǎng)站爬取；
• 在本人實戰(zhàn)中，通過 phantomjs 和數(shù)據(jù) 生成圖表，如下：
  
• 在本人實戰(zhàn)中，可通過 phantomjs 截圖網(wǎng)頁頁面，并且生成樣式一模一樣的PDF文件，如下：
  

生成的PDF基本還原了其原來的樣式，圖片和文字分開了，并非直接截圖；有生成PDF相關(guān)需求的，可以思考生成使用phantomjs 如何實現(xiàn)功能；本人有通過Html模板，生成Html頁面，然后將此頁面上傳至FastDfs服務(wù)器，然后通過返回的url直接生成此pdf，即完成了html頁面一致的pdf生成功能；

• 在接下來的文檔中，本人將會詳細介紹如何使用 phantomjs 生成pdf 以及報表相關(guān)的圖片功能；

二. Windows下安裝 phantomjs

2.1 概述

• Windows下安裝phantomjs比較簡單。（目前官方支持三種操作系統(tǒng)，包括Windows\Mac OS\Linux這三大主流的環(huán)境，根據(jù)自己的運行環(huán)境選擇要下載的包進行下載)
• 總結(jié)來講就是 下載后解壓phantomjs 和 配置環(huán)境變量

2.1 下載并安裝phantomjs

• 進入官網(wǎng)，選擇自身電腦系統(tǒng)對應(yīng)版本下載 官網(wǎng)地址
• 下載好后，進入文件的bin 目錄，復制文件路徑，開始準備配置環(huán)境變量
• 鼠標右擊__我的電腦__選擇 高級系統(tǒng)設(shè)置__然后點擊環(huán)境變量，再然后選擇__系統(tǒng)變量，點擊Path，將phantomjs的bin文件夾所在路徑添加至環(huán)境變量；如圖所示：
• 測試是否安裝成功：
  • 打開cmd 輸入phantomjs -v 顯示當前版本號，若顯示版本號則表示安裝成功！
  • 如圖所示：

三. Linux下 安裝 phantomjs

3.1 概述

• Linux下安裝有三個過程：1. 安裝 2.配置環(huán)境變量 3. 解決中文亂碼(生成圖片時可能會圖片內(nèi)的中文亂碼)

3.2 安裝過程如下：

• 依次執(zhí)行以下命令：

  wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 yum install bzip2 # 安裝bzip2 tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2 mv phantomjs-2.1.1-linux-x86_64 /usr/local/src/phantomjs ln -sf /usr/local/src/phantomjs/bin/phantomjs /usr/local/bin/phantomjs yum install fontconfig freetype2 phantomjs -v # 測試版本號

  當執(zhí)行完此命令時，phantomjs已安裝成功。可以開始配置環(huán)境變量了。

• 配置環(huán)境變量
• 連接至Linux服務(wù)器，進入profile文件vim /etc/profile
• 在profile文件的最后一行中，添加安裝路徑path語句（注意路徑是phantomjs的安裝路徑）export PATH=${PATH}:/usr/local/src/phantomjs/bin/
• 如果是超級用戶，則配置：export PATH=$PATH:/root/phantomjs/bin
• 在Linux服務(wù)器的任意文件目錄中輸入命令： phantomjs
  • 如果能成功進入phantomjs的界面，則表示配置環(huán)境變量成功。成功如圖所示：
    

  進入里面后可執(zhí)行js命令，如果需要退出，則按 Ctrl+C 強制退出

• 解決中文亂碼（可選，可遇到此問題再行解決）
• 正常示例：(Windows上顯示正常如圖：)
• 錯誤示例:(Linux上顯示中文亂碼如圖：)
• 解決辦法：
• 在Linux中執(zhí)行命令：yum install bitmap-fonts bitmap-fonts-cjk

  執(zhí)行此命令后，可能只是中文顯示出來了，數(shù)字還是會顯示空格，如果出現(xiàn)數(shù)字顯示空格，則把windows所有字體導入Linux中，見下面。

• 導入字體：
  • 將Windows字體全部復制，導入到Linux中。
  • 在/usr/share/fonts/下新建micro文件夾。
  • 將字體全部放入micro中。

四. 利用Phantomjs生成Echarts圖片

4.1 概述：

• 實現(xiàn)原理：
  • 在Windows下：
    • 在本地電腦中，我們首先安裝Phantomjs在本地電腦上，并配置好環(huán)境變量，可參照章節(jié)二教程;
    • 準備好 jquery.1.9.1.min.js,echarts-convert.js,echarts.min.js三個文件。
    • 編寫Demo程序，運行主Main方法
  • 在Linux 下：
    • 在Linux系統(tǒng)匯總，我們首先安裝Phantomjs在本地電腦上，并配置好環(huán)境變量，可參照章節(jié)三教程；
    • 其他操作與在Windows操作類似。

  WIndows與Linux環(huán)境下的區(qū)別：①配置好環(huán)境變量，因為phantomjs的啟動方式，windows是執(zhí)行exe文件，linux不是，所以配好環(huán)境變量后java在本機測試與在Linux下無需做任何修改；② Phantomjs執(zhí)行生成Echarts圖片時，需要引用到 jquery.1.9.1.min.js ,echarts-convert.js, echarts.min.js 以及生成Echarts的js文件。這些js需要引用到，而當部署在Linux中時，生成的js文件在jar包中，不一定能讀取到，我們可以通過代碼將js文件復制生成到j(luò)ar包同級目錄，然后通過路徑加載。路徑加載可以用如下代碼讀取并生成：
  ~~~java
  /* 將模板生成到指定的位置 判斷文件是否存在，如果不存在則創(chuàng)建 */
  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 筆者實現(xiàn)思路：

• 第一步：寫出核心代碼： public static void main(String[] args) throws Exception {Runtime rt = Runtime.getRuntime();//windows 本地地址Process p = rt.exec("phantomjs " +"C:\\Code\\Demo\\echarts-convert.js" + " -infile " + "C:\\Code\\Demo\\Demo1\\src\\main\\resources\\echarts\\optionsjs\\" + "1187559506027646976.js -outfile " + "C:\\Demo\\" + "123.png -scale 0.01 -width 1200");InputStream is = p.getInputStream();BufferedReader br = new BufferedReader(new InputStreamReader(is));StringBuffer sbf = new StringBuffer();String tmp = "";while ((tmp = br.readLine()) != null) {sbf.append(tmp);}System.out.println(sbf); }
• 相關(guān)js文件下載
  • 如圖：
    
• 第二步：整理思路：

生成需要生成的Echarts的js代碼：

找到相關(guān)Echarts圖片模板： Echarts官網(wǎng)

使用Framework以及其他技術(shù)：將模板+數(shù)據(jù)生成一個最終js文件；

使用Framework為例：

• 導入xml依賴： <!-- framework--> <dependency><groupId>org.freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.26-incubating</version> </dependency>
• 代碼合成最終js文件示例： // 生成文件public void createDocNew(Map<String,Object> map,String templatePath,String templateName,String outFilePath) throws Exception{try (Writer out=new FileWriter(outFilePath)){//創(chuàng)建一個配置對象,獲取該對象的版本Configuration configuration=new Configuration(Configuration.getVersion());//獲取模板所在目錄configuration.setDirectoryForTemplateLoading(new File(templatePath));//設(shè)置編碼集configuration.setDefaultEncoding("utf-8");//獲取模板對象Template template=configuration.getTemplate(templateName);//輸出文件至指定目錄template.process(map,out);//關(guān)閉流} catch (Exception e) {e.printStackTrace();}} > 這里的代碼就是將map里存儲的值以及模板地址，和outFilePath的生成地址接收，然后生成出最終的js文件。關(guān)于Framework的語法，可以去具體學習，這里不做贅述；當然也可以使用別的方式或者別的模板生成方式；

將其他的三個js文件放到其他位置上，博主的做法是將這三個放到j(luò)ar包目錄內(nèi)，但是會存在phantomjs無法讀取和執(zhí)行的情況（就是除開phantomjs的代碼可以讀取到內(nèi)容，但phantomjs的執(zhí)行無法引用讀取）。所以博主采取的是先讀取出來，再寫到j(luò)ar包外面進行引用；這樣通過路徑，在Linux下也可以讀取了；讀取代碼示例： /* 將模板生成到指定的位置 判斷文件是否存在，如果不存在則創(chuàng)建 */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下的當前路徑 ，具體可百度其用法。

結(jié)合已經(jīng)有的 echarts-convert.js 等文件+ 生成好的帶數(shù)據(jù)的Echarts.js 文件 和 Demo示例代碼可以生成出Echarts圖片了；我們可以將Echart圖片再上傳至Fastdfs等圖片服務(wù)器，就可以拿到網(wǎng)絡(luò)圖片url了；當然最后一步視業(yè)務(wù)需求而定；

五. 利用Phantomjs生成PDF文檔(HTML轉(zhuǎn)為PDF)

5.1 概述

• 生成PDF文檔的技術(shù)有很多種；使用Phantomjs生成PDF的優(yōu)點在于：①操作簡單方便 ②生成的PDF質(zhì)量高，與原來的一致，所見即所得 ③. 免費，無任何隱形廣告
• 目前博主研究的的是HTML生成PDF，其他的還未研究，不知道是否可行，具體可百度。這里講的也是將HTML轉(zhuǎn)為PDF文檔
• 示例代碼：
  • 核心示例demo： public static String parseHtml2Pdf2(String url) throws IOException {Runtime rt = Runtime.getRuntime();Process p = rt.exec("C:/App/phantomjs-2.1.1-windows/bin/phantomjs.exe "+ "C:\\Code\\demo\\parsers\\src\\main\\resources\\wordfiles\\js\\jstemplate\\1190147431954702336.js "+url);InputStream is = p.getInputStream();BufferedReader br = new BufferedReader(new InputStreamReader(is));StringBuffer sbf = new StringBuffer();String tmp = "";while ((tmp = br.readLine()) != null) {sbf.append(tmp);}String resultstr = sbf.toString();String[] arr = resultstr.split("\\$");String result = "";for(String s : arr){if(s.endsWith("pdf"))result = s;}return result; }
  • js模板(1190147431954702336.js)：var page = require('webpage').create(); var system = require('system');讀取命令行參數(shù)，也就是js文件路徑。 if (system.args.length === 1) {console.log('Usage: loadspeed.js <some URL>'); //這行代碼很重要。凡是結(jié)束必須調(diào)用。否則phantomjs不會停止phantom.exit(); } page.settings.loadImages = true; //加載圖片 page.settings.resourceTimeout = 30000;//超過10秒放棄加載 //截圖設(shè)置， //page.viewportSize = { // width: 1000, // height: 3000 //}; var address = system.args[1]; page.open(address, function(status) {function checkReadyState() {//等待加載完成將頁面生成pdfsetTimeout(function () {var readyState = page.evaluate(function () {return document.readyState;});if ("complete" === readyState) {page.paperSize = { width:'297mm',height:'500mm',orientation: 'portrait',border: '1cm' };var timestamp = Date.parse(new Date());var outpathstr = 'C:/Demo/parsers/src/main/resources/wordfiles/pdf_file/1189813692544335872.pdf';page.render(outpathstr);//page.render("c://test.png");//console.log就是傳輸回去的內(nèi)容。console.log("生成成功");console.log("$"+outpathstr+"$");phantom.exit();} else {checkReadyState();}},1000);}checkReadyState(); });

    這里的 var outpathstr = ‘C:/Demo/parsers/src/main/resources/wordfiles/pdf_file/1189813692544335872.pdf’;需要我們?nèi)バ薷臑閷嶋H導出的地址，同時要注意在Linux下的路徑問題；

5.2 生成原理

• 通過示例demo傳入的url （Html 頁面） + 引入的js內(nèi)的導出地址（pdf導出地址）+ 示例Demo代碼，即可將html頁面轉(zhuǎn)換成PDF并保存在指定的地址上；
• 這里的pdf是通過 phantomjs(無頭瀏覽器) +加載Html頁面+ 使用phantomjs的截圖功能 然后生成PDF文件；生成的pdf文件無損 且與真實PDF一致，質(zhì)量很高；

5.3 擴展思路

• 雖然生成pdf是通過Html進行轉(zhuǎn)換的；當我們只需要pdf，不需要html的時候，也可以通過這種簡接的方式生成pdf，最后把html刪掉就可以啦；
• PDF=HTML模板頁面+數(shù)據(jù)+模板化技術(shù)

六.利用Phantomjs+Poi.tl 生成Word文檔

6.1 概述

• 通過Phantomjs 我們可以生成出Echarts圖片；
• 通過Poi.tl我們可以生成出表格，文字，圖片等內(nèi)容；
• 通過Phantomjs+Poi.tl，我們就可以生成出帶Echarts圖片的報表了~！！
• poi-tl使用介紹及簡單教程

6.2 思路

• 通過Phantomjs生成Echarts圖片，并上傳至fastdfs服務(wù)器，我們就可以拿到圖片的網(wǎng)絡(luò)地址了；
• 通過Pol.tl我們可以加載Echarts的網(wǎng)絡(luò)圖片，并且也可以使用表格，其他圖片，文字等信息；
• 執(zhí)行步驟：
• 當我們點擊生成報表的時候，就會先去請求相關(guān)的數(shù)據(jù)接口，拿到數(shù)據(jù)后，利用phantomjs生成Echarts圖片，并上傳至fastdfs服務(wù)器拿到圖片地址url；
• 需要生成表格等的數(shù)據(jù)，就利用Poi.tl生成表格；
• 利用poi.tl將文字以及Echarts等數(shù)據(jù)融入word文檔內(nèi)；
• 利用poi.tl生成word文檔，并上傳至fastdfs，拿到下載url后返回給前端；
• 完成！
• 生成界面如下：
  

總結(jié)

以上是生活随笔為你收集整理的报表开发神器：phantomjs生成PDF ，Echarts图片，自动生成word文档实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。