//文件需要引入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生成图片并下载下来的更多相关文章

  1. C# html生成图片保存下载

    最近有个需求,需要把内容生成图片,我找到一些资料可以将html页面生成图片并保存下载 下面是简单的实现 1.html页面 @{ Layout = null; } <!DOCTYPE html&g ...

  2. MVC 生成图片,下载文件(图片不存在本地,在网上下载)

    /// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...

  3. MVC 生成图片,下载文件

    /// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...

  4. 通过JS将BSAE64生成图片并下载

    HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...

  5. 移动端js模拟截屏生成图片并下载功能的实现方案

    一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存 二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用 ...

  6. Js实现将html页面或div生成图片

    参考:https://blog.csdn.net/huwei2003/article/details/79761580 今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2 ...

  7. js使用html2canvas 生成图片然后下载

    1:html2canvas官网 首先去官网把这个JS下载下来 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. js中保存成图片并下载

    1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...

  9. JavaWeb学习记录(二十三)——文件上传与下载

    一.导入jar包

随机推荐

  1. Zookeeper入门(六)之zkCli.sh对节点的增删改查

    参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./z ...

  2. C++入门经典-例6.18-数组的动态分配,动态获得斐波那契数列

    1:有时在获得一定的信息之前,我们并不确定数组的大小.动态分配数组则可以使用变量作为数组的大小,使数组的大小符合我们的要求. 2:科普一下斐波纳契数列:斐波那契数列指的是这样一个数列 1, 1, 2, ...

  3. TODO: Java虚拟机 初始化过程

    Java虚拟机 初始化过程: 参考: https://www.cnblogs.com/bhlsheji/p/4017816.html 参考:https://blog.csdn.net/boling_c ...

  4. springboot2.0+swagger集成

    场景:项目中添加Swagger配置,可以加速项目的开发,在快速开发项目中十分重要. 1.pom.xml添加swagger <!--swagger --> <dependency> ...

  5. 阶段3 2.Spring_09.JdbcTemplate的基本使用_3 JdbcTemplate在Dao中的使用

    实际的开发过程中都是基于dao的 创建持久层dao 定义三个方法 持久层实现类 创建dao的实现类. 添加未实现的方法 通过spring注入 jdbcTemplate.所以这里生成一个jdbcTemp ...

  6. 分期花呗 账户交易通知:尾号6932客户,您的申请已通过,账户余额38139元,无手续费,点t.cn/Aijsx9vq取款,回T退订。

    10692285499 分期花呗 账户变动通知:尾号6932客户,您的申请已通过,账户余额5000元,请及时点击t.cn/AiOMsNAm取款,回T退订. 106935276259002分期花呗 账户 ...

  7. string中getline,cin的方法getline(),get总结

    一.string中的getline不是string的成员函数,属于全局函数,使用需要include<string>,有两个重载版本: 函数原型参见:http://www.cplusplus ...

  8. Altera DDR2 IP核学习总结1-----------SRAM,DRAM

    SRAM,DRAM,SDRAM和DDR2这些芯片详解网上铺天盖地的各种资料都有,这里只是根据个人习惯做一下总结,方便记忆. 详细资料可以参考https://wenku.baidu.com/view/3 ...

  9. 《Python编程从0到1》笔记1——表达式的风格(前缀、中缀、后缀)

    运算符和运算数组成表达式.运算符和运算数的出现次序会影响表达式乃至程序设计语言的风格. 1.前缀表达式 前缀,是指运算符的位置在前.前缀风格的一个例子是函数调用,如求最大值函数:max(3, 2, 5 ...

  10. shiro登陆认证

    1.LoginController @RequestMapping(method = RequestMethod.POST) public String login(User user, HttpSe ...