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 的列印匯出，還有其他優點，例如：

1) 讓 echarts 的取數更加簡單，不管是從 SQL 庫取數，還是從其他檔案等其他型別資料來源中取數，只需要透過變數賦值就可以完成；

2) 頁面元件佈局也可以直接透過內建功能實現，更加完美的實現數圖結合效果；

3) 使用報表工具內建的 API 介面可以透過幾行程式碼實現把 Echarts 插入 word 報告中，讓報告更加生動清晰；

········