後臺生成Echarts報表的解決方案

在項目中使用Echarts來生成報表，效果不錯，以後有個需求要設置定時時間給指定的郵箱發送報表郵件。後臺使用JFreeChart生成的話樣式不協調，而Echarts須要瀏覽器內核來執行js，後來嘗試過htmlunit，對echarts支持的不是很好，遂放棄了。後來搜索中在一篇博客看到PhantomJs的介紹博客地址能夠實現上述需求。

PhantomJs是一個無頭瀏覽器，對前端頁面支持不錯，對於一些須要爬取異步加載的頁面頗有用。

安裝方法網上不少，

#進入/opt目錄
cd /opt
#下載phantomjs 
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
#解壓軟件壓縮包
tar xvf phantomjs-2.1.1-linux-x86_64.tar.bz2 

# 編輯配置文件.
vim /etc/profile
# 將PhantomJS的bin目錄加入到PATH環境變量中.
export PATH=${PATH}:/opt/phantomjs-2.1.1-linux-x86_64/bin

# 退出vi編輯器，使用source命令讓剛纔的配置即時生效.
source /etc/profile

# 測試PhantomJS是否安裝成功，若是打出了版本信息，即安裝成功.
phantomjs -v  

#請phantom.js放到/opt目錄下

安裝完成須要編輯phantomjs腳本，可參考如下腳本：

var system = require('system');  
var page = require('webpage').create();

// 若是是windows,設置編碼爲gbk，防止中文亂碼,Linux自己是UTF-8
var osName = system.os.name;  
if ('windows' === osName.toLowerCase()) {  
    phantom.outputEncoding="gbk";
}

// 獲取第二個參數(即請求地址url).
var url = system.args[1];

// 顯示控制檯日誌.
page.onConsoleMessage = function(msg) {  
    console.log('[' + msg + ']');
};

//打開給定url的頁面.
page.open(url, function(status) {  
    if (status == 'success') {
        //console.log('echarts頁面加載完成,加載耗時:' + (new Date().getTime() - start) + ' ms');
        // 因爲echarts動畫效果，延遲500毫秒確保圖片渲染完畢再調用下載圖片方法.
         console.log("頁面加載成功!");
    } else {
        console.log("頁面加載失敗 Page failed to load!");
    }
    // 10秒後再關閉瀏覽器.
    setTimeout(function() {
        phantom.exit();
    }, 10000);
});

在剛開始使用時發現沒有執行頁面JS，將page.content打印才發現訪問頁面被登錄攔截了。

上傳服務器時報錯2018-09-21 15:41:29[DEBUG]-[Thread: TP-exec-1]-[org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues()]: Failed to resolve argument 0 of type 'java.lang.String'
org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter 'doc' is not present

後來發現是web容器作了上傳限制致使,在tomcat配置中加入maxPostSize="-1"便可

 

Phantomjs+echarts後臺生成報表遇到一個問題生成報表文件的base64編碼的URL的圖片,體積會100倍,內容裏會多出不少個A,在GitHub搜索到相似狀況並給出解決方案

https://github.com/ariya/phantomjs/issues/10455

大體由於phantomjs對canvas和png格式不兼容致使,須要明確質量參數

解決方法是修改Echarts源碼將echarts中用canvas生成圖片的方法指定質量參數0便可解決,相似如下:

varo="svg"===this._zr.painter.getType()?this.getSvgDataUrl():this.getRenderedCanvas(t).toDataURL("image/"+(t&&t.type||"png",0.5));

 

使用jepg格式能夠規避這種問題

myChart.getDataURL({

       type:'jpeg',

       pixelRatio: 1,

       backgroundColor: '#fff'

   });

 

又雙叒叕有問題了,線上和仿真渲染出的圖片文字模糊一直存在,一直在找phantomjs的問題,想找個替代的方案.今天想到模糊的文字都是沒有中文的,而後就想到是系統字體的緣由

操做步驟以下:

1.將附件中字體複製到 /usr/share/fonts/zh_CN  目錄下

2.對目錄受權 #chmod 777 /usr/share/fonts/zh_CN 

3.#mkfontscale        // 若是提示 mkfontscale: command not found，需自行安裝 #yum install mkfontscale

4.#mkfontdir

5.#fc-cache –fv        // 刷新內存中的字體緩存

6.#source /etc/profile        // 執行如下命令讓字體生效