将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)
})
}
将div生成图片并下载下来的更多相关文章
- C# html生成图片保存下载
最近有个需求,需要把内容生成图片,我找到一些资料可以将html页面生成图片并保存下载 下面是简单的实现 1.html页面 @{ Layout = null; } <!DOCTYPE html&g ...
- MVC 生成图片,下载文件(图片不存在本地,在网上下载)
/// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...
- MVC 生成图片,下载文件
/// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...
- 通过JS将BSAE64生成图片并下载
HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...
- 移动端js模拟截屏生成图片并下载功能的实现方案
一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存 二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用 ...
- Js实现将html页面或div生成图片
参考:https://blog.csdn.net/huwei2003/article/details/79761580 今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2 ...
- js使用html2canvas 生成图片然后下载
1:html2canvas官网 首先去官网把这个JS下载下来 <!DOCTYPE html> <html lang="en"> <head> & ...
- js中保存成图片并下载
1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...
- JavaWeb学习记录(二十三)——文件上传与下载
一.导入jar包
随机推荐
- Zookeeper入门(六)之zkCli.sh对节点的增删改查
参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的 zkCli.sh 就是ZooKeeper客户端 ./z ...
- C++入门经典-例6.18-数组的动态分配,动态获得斐波那契数列
1:有时在获得一定的信息之前,我们并不确定数组的大小.动态分配数组则可以使用变量作为数组的大小,使数组的大小符合我们的要求. 2:科普一下斐波纳契数列:斐波那契数列指的是这样一个数列 1, 1, 2, ...
- TODO: Java虚拟机 初始化过程
Java虚拟机 初始化过程: 参考: https://www.cnblogs.com/bhlsheji/p/4017816.html 参考:https://blog.csdn.net/boling_c ...
- springboot2.0+swagger集成
场景:项目中添加Swagger配置,可以加速项目的开发,在快速开发项目中十分重要. 1.pom.xml添加swagger <!--swagger --> <dependency> ...
- 阶段3 2.Spring_09.JdbcTemplate的基本使用_3 JdbcTemplate在Dao中的使用
实际的开发过程中都是基于dao的 创建持久层dao 定义三个方法 持久层实现类 创建dao的实现类. 添加未实现的方法 通过spring注入 jdbcTemplate.所以这里生成一个jdbcTemp ...
- 分期花呗 账户交易通知:尾号6932客户,您的申请已通过,账户余额38139元,无手续费,点t.cn/Aijsx9vq取款,回T退订。
10692285499 分期花呗 账户变动通知:尾号6932客户,您的申请已通过,账户余额5000元,请及时点击t.cn/AiOMsNAm取款,回T退订. 106935276259002分期花呗 账户 ...
- string中getline,cin的方法getline(),get总结
一.string中的getline不是string的成员函数,属于全局函数,使用需要include<string>,有两个重载版本: 函数原型参见:http://www.cplusplus ...
- Altera DDR2 IP核学习总结1-----------SRAM,DRAM
SRAM,DRAM,SDRAM和DDR2这些芯片详解网上铺天盖地的各种资料都有,这里只是根据个人习惯做一下总结,方便记忆. 详细资料可以参考https://wenku.baidu.com/view/3 ...
- 《Python编程从0到1》笔记1——表达式的风格(前缀、中缀、后缀)
运算符和运算数组成表达式.运算符和运算数的出现次序会影响表达式乃至程序设计语言的风格. 1.前缀表达式 前缀,是指运算符的位置在前.前缀风格的一个例子是函数调用,如求最大值函数:max(3, 2, 5 ...
- shiro登陆认证
1.LoginController @RequestMapping(method = RequestMethod.POST) public String login(User user, HttpSe ...