將div生成圖片並下載下來


//文件需要引入html2canvas.js、jquery.js
function downLoadImg(){ var element = $(".orgchart");    // 這個dom元素是要生成img的div容器
        var w = element.outerWidth();    // 設置該容器的寬
        var h = element.outerHeight();    // 設置該容器的高
var canvas = document.createElement("canvas"); canvas.width = w; // 設置畫布寬&&高 canvas.height = h ; var offsetTop = element.offset().top; // 獲得該容器的上偏移量 var offsetLeft = element.offset().left; // 獲得該容器的左偏移量 var context = canvas.getContext("2d"); context.translate(-offsetLeft, -offsetTop); var opts = { canvas: canvas, width: w, height: h } html2canvas(element, opts).then(function (canvas) { setTimeout(function(){ let a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); a.href = canvas.toDataURL('image/png',1.0) a.download = '下載' a.click() },100) }) }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM