//文件需要引入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. 超全详解Java开发环境搭建

    摘自:https://www.cnblogs.com/wangjiming/p/11278577.html 超全详解Java开发环境搭建   在项目产品开发中,开发环境搭建是软件开发的首要阶段,也是必 ...

  2. ES6指北【1】——let、const

    1.如何学习ES6 1.1 js的学习顺序 ES5 -> ES6 -> ES7 -> ES8 以此类推 ES5没学好就别想学好ES6 1.2 边学边用 学了就要用 2.变量声明的方式 ...

  3. spring整合之后运行报什么只读错误。Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.

    解决办法, 再大dao的实现类上添加注解: @Transactional(readOnly = false ) 不让它只读就行了

  4. winscp连接后目录名称乱码

    1.点击[编辑](点后变为保存按钮)按钮,高级按钮变为可用,点击[高级] 2.文件名utf-8编码,默认为“自动”,勾选为“开启”

  5. gojs常用API

    操作类API: 添加节点: myDiagram.model.addNodeData(node); var node = {}; node["key"] = "节点Key& ...

  6. python3笔记十八:python列表元组字典集合文件操作

    一:学习内容 列表元组字典集合文件操作 二:列表元组字典集合文件操作 代码: import pickle  #数据持久性模块 #封装的方法def OptionData(data,path):    # ...

  7. 客户端浏览器向服务器发起http请求的全过程

    http协议的参考:http://blog.csdn.net/hefeng6500/article/details/75081047 (1)浏览器先搜索自身的DNS缓存 (2)操作系统搜索自身的DNS ...

  8. kkfileview v2.0 发布,文件在线预览项目方案

    kkfileview文件在线预览 此项目为文件文档在线预览项目解决方案,项目使用流行的spring boot搭建,易上手和部署,部署好后可以独立提供预览服务,使用http接口访问,不需要和应用集成,具 ...

  9. python连redis测试

    python 版本 3.x执行环境需要安装redis模块: pip install redis 执行脚本前,有redis-cli中查询key值: 执行脚本: ********************* ...

  10. 浏览器端-W3School-HTML:HTML DOM Object 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Object 对象 1.返回顶部 1. HTML DOM Object 对象 Object 对象 Object 对象代表 HTM ...