用Canvas實作截取網頁内容儲存為圖檔

最近有個客戶提出需求，要把報表導出成電子版，什麼格式都行。

當時我想啊，轉成word、Excel不可取，轉成pdf可以完整保留頁面樣式，是以就找各種html轉pdf的插件，也試了pechkin、itextsharp等等，然後就發現一個緻命的問題。

我的資料是js綁定的，頁面裡點和線的高度也是根據參照物在頁面中的高度計算的，是以要等資料加載完成後再轉換，而這兩個插件都沒轉成功。

是以就想啊，隻能轉成圖檔了，明确了方向，有目的的尋找解決方案，很快就找到了一個插件，用canvas畫出指定的html。這個插件就是html2canvas。傳送門：html2canvas

這個插件的調用方法很簡單，把需要轉成圖檔的那一部分容器對象傳入即可，如果是整個頁面，可以傳入document.body。

引入js檔案

<script src="js/html2canvas.min.js"></script>
           

下面是測試代碼

html2canvas(document.body).then(canvas => { saveImg(canvas) });//按照官網給的調用方式，代碼很簡潔，saveImg是我自定義的回調函數，用于儲存圖檔，擷取到了canvas，就能夠用canvas.toDataURL()擷取圖檔的base64字元串，然後進行儲存即可。