报表开发神器:phantomjs生成PDF ,Echarts图片,自动生成word文档实战
報表開發(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
- 下一篇: 生活是长跑