web 頁面如何實現 echarts 統計圖的打印導出?

實現 echarts 的打印導出功能是需要前端和後端一起來完成的,也就是需要 echarts 在頁面呈現之後,由瀏覽器截圖並把圖片傳遞給後端,後端最後實現打印導出。例如單頁 echarts 導出打印的實現可以用 getDataURL() 方法獲得圖片後進行後續處理。

而當數據是分頁展現的時候,頁面中是沒有將所有的 echarts 統計圖進行展現的(比如第 2 頁也有 echarts,但是沒翻頁之前第 2 頁是不展現的),瀏覽器也就無法截圖給後端程序;而後端程序在執行打印導出過程中也不能調用 js 進行截圖。那麼當我們使用單頁導出方案時就會出現這樣的問題:導出打印的結果中 echarts 會有顯示空白的情況。

這時候可以通過使用一些前端自動化測試工具來讓所有頁中的 echarts 圖形進行展現,然後截圖給後端。以 slimerjs 插件爲例,具體實現思路如下:

1)根據前臺頁面獲取每頁 echarts 代碼

2)每頁 echarts 代碼對應生成一個臨時文件

3)運行命令獲取臨時文件

4)啓動火狐裝載臨時文件並展現

5)利用 calcEcharts.js 轉化成 base64 碼圖片

6)java 導出打印 base64 碼圖片

如果不想通過寫代碼實現 echarts 的打印導出功能,那麼也有懶人方法:使用內置了 echarts 打印導出功能的報表工具,簡單兩步操作就可以實現:

1)報表工具中複製粘貼 echarts 代碼完成統計圖製作

imagepng

2)服務器端配置 slimerjs 加載並安裝火狐瀏覽器

具體操作可以參考 如何才能導出和打印 Echarts 圖形?

使用報表工具除了可以快速實現 echarts 的打印導出,還有其他優點,例如:

1) 讓 echarts 的取數更加簡單,不管是從 SQL 庫取數,還是從其他文件等其他類型數據源中取數,只需要通過變量賦值就可以完成;

2) 頁面組件佈局也可以直接通過內置功能實現,更加完美的實現數圖結合效果;

3) 使用報表工具內置的 API 接口可以通過幾行代碼實現把 Echarts 插入 word 報告中,讓報告更加生動清晰;

········

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章