【摘要】
Echarts,江湖人稱一個純 Javascript 的圖表庫,圖形種類星羅棋佈且個個顏值爆表,能夠輕鬆駕馭 PC 和移動設備,與絕大部分瀏覽器均可稱兄道弟,並且已然衆多擁躉,還有很多報表對它採起了嫁接技術。
這麼棒的圖標庫如何能在報表工具裏導出和打印呢?Echarts 圖形是由 Javascript 親自在前端網頁上繪製的,須要從瀏覽器中截取圖形才能導出和打印,而報表工具的導出功能是在後臺實現的。因此這就有必定難度了,快去乾學院看個究竟:如何才能導出和打印 Echarts 圖形?!html
地球人都知道,報表工具通常都有導出和打印的功能,不只能夠將圖形在頁面上顯示,還能夠導出到 WORD、PDF 等文件中提升逼格,或者直接打印出來以供參考。So,每一個 baby 都但願被集成的 Echarts 圖形也能夠,也能夠和報表工具自己的那些美膩圖形同樣被導出打印。前端
可是,沒那麼簡單!Echarts 圖形是由 Javascript 親自在前端網頁上繪製的,須要從瀏覽器中截取圖形才能導出和打印,而報表工具的導出功能是在後臺實現的。噢?這就麻煩啦,還須要把瀏覽器畫出來的圖形取下來再啃吃啃吃傳遞給後臺服務器。並且,萬一報表有不少頁呢,萬一頁面上不所有顯示呢,那導出時還沒呈現的圖就沒法截取了;打印也是相似地,通常報表工具的打印是用 Applet、FLASH 或導出成 PDF 等方式,都不 care 瀏覽器的,無法執行 Javascript 畫圖命令的。web
那麼問題來了,到底怎麼才能實現 Echarts 圖形的導出與打印呢?編程
噹噹噹當,潤乾報表來了,用新版本直接搞定,並且仍是那個白菜價哈,10000 一套!瀏覽器
實現方案是這樣滴:服務器
SlimerJS 是服務器端的 JavaScriptAPI 工具。也就是沒有界面的可編程操做的瀏覽器。這樣,潤乾報表就能夠用 Javascript腳本操縱網頁,實現對頁面圖形的、網絡監控等一系列操做了。網絡
因爲 SlimerJS 基於火狐的 Gecko 內核,所以使用 SlimerJS 時還須要安裝與它匹配的 FireFox 瀏覽器版本。而後在報表服務器端能夠利用 SlimerJS 返回的 API 程序,把網頁中畫出的 Echarts 統計圖轉換成一張圖片,而後加載到報表單元格里進行打印、導出。app
目前 SlimerJS 只能支持 Firefox 38-52 或者更低版本,因此不要下載安裝 Firefox 最新版本。echarts
SlimerJS 已經被加入潤乾報表安裝包中,放在潤乾報表【安裝根目錄】\report\web\webapps\demo\raqsoft\slimerjs-0.10.3.zip;webapp
也能夠從 SlimerJS 官方網站https://slimerjs.org/download.html下載。
在 WEB-INF/raqsoftConfig.xml 中增長了兩項配置。
// slimerjsDir 配置SlimerJS的安裝目錄。未配置此項,應用就不具有打印和導出Echarts的功能 <property name="slimerjsDir" value="e:\\\\\slimerjs-0.10.3"></property> <property name="echartsJSUrlPrefix" value="http://localhost:6868/demo/raqsoft"></property> // slimerjsDir 配置SlimerJS的安裝目錄。未配置此項,應用就不具有打印和導出Echarts的功能 <property name="slimerjsDir" value="e:\\\slimerjs-0.10.3"></property> <property name="echartsJSUrlPrefix" value="http://localhost:6868/demo/raqsoft"></property>
如今點擊報表呈現界面上方的菜單欄按鈕就能夠進行導出和打印操做了。
導出:潤乾報表可將帶有統計圖的報表文件輸出爲徹底不失真的 Excel 文件、PDF 文件、WORD 文件。
打印:潤乾報表可將帶有統計圖的報表文件進行 Applet 打印、Flash 打印、PDF 打印。
明白人都看出來了吧,這個辦法也適用於其餘類型的 Javascript 圖形,潤乾報表目前已集成了多種第三方開源圖形包,包括:echarts、chart.js、D3 等等。導出與打印的使用方法和上述的 Echarts 圖形是同樣同樣地,在下圖所示的 JavaScript 代碼區域中直接寫入所使用的圖表腳本便可。
嗯,就這麼簡單。