在頁面中導出指定div中的圖片

截圖1

截圖2

代碼

/*導出告警統計圖*/document.querySelector(".countImageExport").onclick = function(){var dom = document.querySelector("#alarmCountContent");html2canvas(dom).then(function(canvas) {var image = canvas.toDataURL("image/png");image = image.replace("image/png",'image/octet-stream');/*** 在本地進行文件保存* @param {String} data 要保存到本地的圖片數據* @param {String} filename 文件名*/var saveFile = function(data, filename){var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};// 下載后的問題名var filename = '歷史告警統計圖.png';// downloadsaveFile(image,filename);});}

總結

以上是生活随笔為你收集整理的导出页面div中的图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。