web頁面怎么實現echarts統計圖的打印導出

這篇文章主要講解了“web頁面怎么實現echarts統計圖的打印導出”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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 代碼完成統計圖制作

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

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

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

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

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

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

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