将div生成图片并下载下来

作者:互联网

2026-03-24

HTML教程
//文件需要引入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) }) }