在html前端页面使用html2canvas进行网页截图

去年做一个项目遇到网页截图的需求，尝试了各种方法也收了好多文章，大多数都不适用于自己遇到的问题，通过参考其他大神的解决方案，再结合自己实际需求，研究了一个周才最终解决，所以记录下来分享这次宝贵的经历，希望可以供大家参考。

首先在第一个页面定义一个超链接并注册一个函数，用来触发点击时间来执行截图的方法。

 点击超链接A标签所在的位置即可实现截图功能，同时下载图片，div区域代表需要截图保存的位置，其中函数中参数：domId代表的是将要截图的元素的ID.

<a id="down_button" href="javascript:void(0)" onclick="domShot('total')">截图</a>

<div id="total">XXX</div>

function domShot(domId) {
    var fileName = 'qualityDiff' + factoryNo + '.png';
    beforedownload(fileName);
    console.log("domId=" + domId);
    html2canvas(document.getElementById(domId), {       
        allowTaint: true,
        height: $("#" + domId).outerHeight()
    }).then(function (canvas) {
        var timestamp = Date.parse(new Date());
        $('#down_button').attr('href', canvas.toDataURL());
        $('#down_button').attr('download', 'qualityDiff' + factoryNo + '.png');//指定下载生成的文件名称及格式
       
    });
}