html2canvas生成图片（图片样式和显示样式不一致）

//引入

<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 });

//设置id（用于销毁，否则会导致页面重复生成table）

cloneDom.attr("id", "tmp_datatable");
$("body").append(cloneDom);

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

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

　　$("#tmp_datatable").remove();

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

转载于:https://www.cnblogs.com/gdog/p/10737437.html