报表开发神器：phantomjs生成PDF ，Echarts图片，自动生成word文档实战
生活随笔
收集整理的這篇文章主要介紹了
报表开发神器：phantomjs生成PDF ，Echarts图片，自动生成word文档实战
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
報表開發(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 強制退出
- 如果能成功進入phantomjs的界面，則表示配置環(huán)境變量成功。成功如圖所示：
- 解決中文亂碼（可選，可遇到此問題再行解決）
- 正常示例：(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”);
}
~~~ - 在Windows下：
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文件下載
- 如圖：
- 如圖：
- 第二步：整理思路：
- 導入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的語法，可以去具體學習，這里不做贅述；當然也可以使用別的方式或者別的模板生成方式；
重點代碼：System.getProperty(“user.dir”) 為 Windows下或者Linux下的當前路徑 ，具體可百度其用法。
五. 利用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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： array python 交集_Pyth
- 下一篇： 生活是长跑