Echarts，江湖人稱一個純 Javascript 的圖表庫，圖形種類星羅棋佈且個個顏值爆表，可以輕鬆駕馭 PC 和移動裝置，與絕大部分瀏覽器都可稱兄道弟，而且已然眾多擁躉，還有不少報表對它採取了嫁接技術。

地球人都知道，報表工具一般都有匯出和列印的功能，不僅可以將圖形在頁面上顯示，還可以匯出到 WORD、PDF 等檔案中提高逼格，或者直接打印出來以供參考。So，每個 baby 都希望被整合的 Echarts 圖形也可以，也可以和報表工具本身的那些美膩圖形一樣被匯出列印。

但是，沒那麼簡單！Echarts 圖形是由 Javascript 親自在前端網頁上繪製的，需要從瀏覽器中擷取圖形才能匯出和列印，而報表工具的匯出功能是在後臺實現的。噢？這就麻煩啦，還需要把瀏覽器畫出來的圖形取下來再啃吃啃吃傳遞給後臺伺服器。而且，萬一報表有很多頁呢，萬一頁面上不全部顯示呢，那匯出時還沒呈現的圖就無法截取了；列印也是類似地，一般報表工具的列印是用 Applet、FLASH 或匯出成 PDF 等方式，都不 care 瀏覽器的，沒法執行 Javascript 畫圖命令的。

那麼問題來了，到底怎麼才能實現 Echarts 圖形的匯出與列印呢？

噹噹噹當，潤乾報表來了，用新版本直接搞定，而且還是那個白菜價哈，5000 一套！

實現方案是這樣滴：

第一步：部署環境

1，在伺服器端安裝 SlimerJS 和 Firefox。

SlimerJS 是伺服器端的 JavaScriptAPI 工具。也就是沒有介面的可程式設計操作的瀏覽器。這樣，潤乾報表就可以用 Javascript指令碼操縱網頁，實現對頁面圖形的、網路監控等一系列操作了。

由於 SlimerJS 基於火狐的 Gecko 核心，因此使用 SlimerJS 時還需要安裝與它匹配的 FireFox 瀏覽器版本。然後在報表伺服器端可以利用 SlimerJS 返回的 API 程式，把網頁中畫出的 Echarts 統計圖轉換成一張圖片，然後載入到報表單元格里進行列印、匯出。

目前 SlimerJS 只能支援 Firefox 38-52 或者更低版本，所以不要下載安裝 Firefox 最新版本。

SlimerJS 已經被加入潤乾報表安裝包中，放在潤乾報表【安裝根目錄】\report\web\webapps\demo\raqsoft\slimerjs-0.10.3.zip；

2，新增環境變數，設定變數名為 SLIMERJSLAUNCHER，變數值為 firefox 的安裝路徑。

3，WEB 應用配置

在 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> 

第二步：製作包含 Echarts 圖形的報表

第三步：匯出與列印

現在點選報表呈現介面上方的選單欄按鈕就可以進行匯出和列印操作了。

匯出：潤乾報表可將帶有統計圖的報表檔案輸出為完全不失真的 Excel 檔案、PDF 檔案、WORD 檔案。

列印：潤乾報表可將帶有統計圖的報表檔案進行 Applet 列印、Flash 列印、PDF 列印。

明白人都看出來了吧，這個辦法也適用於其他型別的 Javascript 圖形，潤乾報表目前已集成了多種第三方開源圖形包，包括：echarts、chart.js、D3 等等。匯出與列印的使用方法和上述的 Echarts 圖形是一樣一樣地，在下圖所示的 JavaScript 程式碼區域中直接寫入所使用的圖表指令碼即可。

嗯，就這麼簡單。