文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
1. 背景
地圖端展示了各類制圖效果，用戶希望可以一鍵生成報表，其中核心即前端地圖制圖界面可以自動截圖填入報表中。由於此項目版本有些陳舊，暫時無法升級，PC端地圖並不是采用的Canvas繪制（即使導圖有跨域，也可以通過服務端代理來解決），而是依然基於div的方式拼接而成，導致其自動導圖難度大大提高。
通過與用戶的初步交流，讓其改成了截圖方案。但是截圖方案依然需要安裝插件（采用的UdCapture），通配IE和Chrome，但是截圖分辨率上差強人意。最近瀏覽博客時發現博友“遙想公瑾當年”推薦的一個插件puppeteer可以解決這個問題，於是研究測試了一下，可行，以下為總結。
2. 思路
Puppeteer可以理解成利用chrome的核心模塊（無UI）進行API調用，具體如何安裝，博客挺多，不累述。
本文對指定模塊功能的截圖思路為：
a.編寫一個專門用給截圖的html頁面，該頁面中對所需截圖內容進行展示。
b.Puppeteer利用對頁面console輸出的監聽，當監聽到初始化完成時，觸發截圖。
測試結果如下：
3. 通用功能化的幾點思考
目前該功能為定制功能，要做到通用接口化，及通過接口即可指定對哪些內容截圖還需幾點改造：
a.截圖靜態頁面可以傳入待截圖功能函數名、參數等，正常觸發。
b.nodejs環境需要裝入GIS服務器docker中。
-----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
