将div生成图片并下载下来
2024-09-24 08:53:28
//文件需要引入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)
}) }
最新文章
- C/C++中const的用法 分类: C/C++ 2015-07-05 00:43 85人阅读 评论(0) 收藏
- 进程间通信方式与Binder机制原理
- dubbo 教程
- nnnaaavvv
- js 微信分享
- iOS VideoToolbox硬编H.265(HEVC)H.264(AVC):2 H264数据写入文件
- mongoose的用法(注:连接数据库)
- ssh配置导致Ansible并发失败
- 用CSS让文字居于div的底部
- nodejs 搭建 RESTful API 服务器的常用包及其简介
- Android开发技巧——自定义控件之自定义属性
- Android自动化框架介绍
- java web后台工作原理
- 各数据库连接maven配置
- php项目踩到的empty函数的一个坑
- UEditor自动调节宽度
- [LeetCode&;Python] Problem 669. Trim a Binary Search Tree
- 《C++反汇编与逆向分析技术揭秘》之十——构造函数
- 个人学习jQuery笔记
- Mysql Fabric实现学习笔记