//文件需要引入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. centos安装FTP脚本

    一键安装脚本 只需要自己设置一下脚本开头的几个字符串参数即可 #!/bin/bash port=" user="code" pass=" dir="/ ...

  2. String 类源码分析

    String 源码分析 String 类代表字符序列,Java 中所有的字符串字面量都作为此类的实例. String 对象是不可变的,它们的值在创建之后就不能改变,因此 String 是线程安全的. ...

  3. nodejs之流数据读取与写入

    1.(fs.createReadStream)当文件比较大时,建议使用文件流读取,不会出现卡顿现象,demo如下. const fs = require('fs'); //流的方式读取文件 var r ...

  4. 阶段3 2.Spring_06.Spring的新注解_8 spring整合junit完成

    Junit的核心Runner在执行的时候不会创建容器.同时它字节码文件,也改不了 spring整合junit 想办法把junit里面的不能加载容器的main方法换掉.从而实现创建容器.有了容器就可以实 ...

  5. 阶段3 2.Spring_03.Spring的 IOC 和 DI_10 构造函数注入

    在AccountServiceImpl内定义三个属性 这里关注点是这几种类型.基本类型的包装类Integer 还有String类型,也包含了其他bean类型.Date 定义构造函数并赋值 重点关注在数 ...

  6. 阶段3 2.Spring_01.Spring框架简介_04.spring发展历程

  7. 转载-c++深拷贝和浅拷贝

    转载自:https://blog.csdn.net/u010700335/article/details/39830425 C++中类的拷贝有两种:深拷贝,浅拷贝:当出现类的等号赋值时,即会调用拷贝函 ...

  8. RTX和谐说明

    1.下载安装原版RTX20152.打开“服务”,停止RTX开头的服务.3.替换C:\Program Files\Tencent\RTXServer\License目录下的License.ini文件:替 ...

  9. JDBC操作数据库的基本操作

    JDBC操作数据库的基本步骤: 1)加载(注册)数据库驱动(到JVM). 2)建立(获取)数据库连接. 3)创建(获取)数据库操作对象. 4)定义操作的SQL语句. 5)执行数据库操作. 6)获取并操 ...

  10. Jmeter响应数据中文乱码|响应内容显示乱码

    1.使用jmeter进行接口调用时出现返回数据乱码,如图示 原因是jmeter默认按照ISO-8859-1解析响应的数据. 2.所以需要修改bin目录下的jmeter.properties文件: 具体 ...