web頁面怎么實現(xiàn)echarts統(tǒng)計圖的打印導(dǎo)出

這篇文章主要講解了“web頁面怎么實現(xiàn)echarts統(tǒng)計圖的打印導(dǎo)出”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“web頁面怎么實現(xiàn)echarts統(tǒng)計圖的打印導(dǎo)出”吧！

實現(xiàn) echarts 的打印導(dǎo)出功能是需要前端和后端一起來完成的，也就是需要 echarts 在頁面呈現(xiàn)之后，由瀏覽器截圖并把圖片傳遞給后端，后端最后實現(xiàn)打印導(dǎo)出。例如單頁 echarts 導(dǎo)出打印的實現(xiàn)可以用 getDataURL() 方法獲得圖片后進(jìn)行后續(xù)處理。

而當(dāng)數(shù)據(jù)是分頁展現(xiàn)的時候，頁面中是沒有將所有的 echarts 統(tǒng)計圖進(jìn)行展現(xiàn)的（比如第 2 頁也有 echarts，但是沒翻頁之前第 2 頁是不展現(xiàn)的），瀏覽器也就無法截圖給后端程序；而后端程序在執(zhí)行打印導(dǎo)出過程中也不能調(diào)用 js 進(jìn)行截圖。那么當(dāng)我們使用單頁導(dǎo)出方案時就會出現(xiàn)這樣的問題：導(dǎo)出打印的結(jié)果中 echarts 會有顯示空白的情況。

這時候可以通過使用一些前端自動化測試工具來讓所有頁中的 echarts 圖形進(jìn)行展現(xiàn)，然后截圖給后端。以 slimerjs 插件為例，具體實現(xiàn)思路如下：

1）根據(jù)前臺頁面獲取每頁 echarts 代碼

2）每頁 echarts 代碼對應(yīng)生成一個臨時文件

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

4）啟動火狐裝載臨時文件并展現(xiàn)

5）利用 calcEcharts.js 轉(zhuǎn)化成 base64 碼圖片

6）java 導(dǎo)出打印 base64 碼圖片

如果不想通過寫代碼實現(xiàn) echarts 的打印導(dǎo)出功能，那么也有懶人方法：使用內(nèi)置了 echarts 打印導(dǎo)出功能的報表工具，簡單兩步操作就可以實現(xiàn)：

1）報表工具中復(fù)制粘貼 echarts 代碼完成統(tǒng)計圖制作

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

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

使用報表工具除了可以快速實現(xiàn) echarts 的打印導(dǎo)出，還有其他優(yōu)點，例如：

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

2) 頁面組件布局也可以直接通過內(nèi)置功能實現(xiàn)，更加完美的實現(xiàn)數(shù)圖結(jié)合效果；

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

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