Echarts圖形的打印導出怎么實現

這篇文章主要講解了“Echarts圖形的打印導出怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Echarts圖形的打印導出怎么實現”吧！

第一步：部署環境

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

SlimerJS 是服務器端的 JavaScriptAPI 工具。也就是沒有界面的可編程操作的瀏覽器。這樣，潤乾報表就可以用 Javascript腳本操縱網頁，實現對頁面圖形的、網絡監控等一系列操作了。

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

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

從 SlimerJS 官方網站 https://slimerjs.org/download.html 下載。

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>// 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 name="echartsJSUrlPrefix" value="http://localhost:6868/demo/raqsoft"/>

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

第三步：導出與打印

現在點擊報表呈現界面上方的菜單欄按鈕就可以進行導出和打印操作了。

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

打印：潤乾報表可將帶有統計圖的報表文件進行 Applet 打印、Flash 打印、PDF 打印。

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

感謝各位的閱讀，以上就是“Echarts圖形的打印導出怎么實現”的內容了，經過本文的學習后，相信大家對Echarts圖形的打印導出怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！