首页 > Web开发 > 详细

html2canvas生成图片(图片样式和显示样式不一致)

时间:2019-04-19 17:54:22      阅读:664      评论:0      收藏:0      [点我收藏+]

//引入

<script src="/static/webadmin/js/html2canvas.min.js"></script>

 

<a style="margin-bottom:0px;display:none;" id="create_image" class="btn btn-warning" download="下载的图片"><i class="fa fa-download">&nbsp;下载图片</i></a>

 

//克隆一个table(因为显示样式与导出样式不一致,所有用此方法解决)
var cloneDom = $(".dataTables_list").clone(true);
//排版,不显示在页面上(不能用display:none,会导致无法生成url)
cloneDom.css({ "position": "absolute", "top": "0px", "z-index": "-1", "width":600 });
$("body").append(cloneDom);

//生成图片下载链接
html2canvas(cloneDom[0]).then(function(canvas)
{
  var imgUri = canvas.toDataURL();

  //销毁克隆对象
  cloneDom.empty();

  $("#create_image").attr(‘href‘, imgUri);
  $("#create_image").css("display","");
})

html2canvas生成图片(图片样式和显示样式不一致)

原文:https://www.cnblogs.com/gdog/p/10737437.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!