将div生成图片并下载下来
作者:互联网
2026-03-24
//文件需要引入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) }) }
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
AI精选
精选
MCP协议设计与实现-第20章 从零构建一个生产级 MCP Server
精选
MCP协议设计与实现-第16章 服务发现与客户端注册
精选
MCP协议设计与实现-第18章 Elicitation、Roots 与配置管理
精选
MCP协议设计与实现-第10章 Python Server 实现剖析
精选
MCP协议设计与实现-第17章 sampling
精选
MCP协议设计与实现-第09章 TypeScript Client 实现剖析
精选
MCP协议设计与实现-第19章 Claude Code 的 MCP 客户端:12 万行的实战
精选
MCP协议设计与实现-第12章 STDIO 传输:本地进程通信
