js网页截图

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 600px;
            height: 3000px;
            background-color: pink;
        }
    </style>
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>

</head>
<body>
<div class='box'></div>
<input  type="button" value="button" id="saveData">
生成界面如下：
</body>
<script  type="text/javascript" >
    //保存数据,把当前报表的数据保存为Png图片，在触发另存为...的同时，指定文件名和文件格式
    $('#saveData').click(function () {
        //#proMain:要截图的DOM元素
        //useCORS:true:解决跨域问题
        html2canvas(document.querySelector('body'),{useCORS:true}).then(function (canvas) {
            //获取年月日作为文件名
            var timers=new Date();
            var fullYear=timers.getFullYear();
            var month=timers.getMonth()+1;
            var date=timers.getDate();
            var randoms=Math.random()+'';
            //年月日加上随机数
            var numberFileName=fullYear+''+month+date+randoms.slice(3,10);
            var imgData=canvas.toDataURL();
            //保存图片
            var saveFile = function(data, filename){
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };
            //最终文件名+文件格式
            var filename = numberFileName + '.png';
            saveFile(imgData,filename);
            //document.body.appendChild(canvas);  把截的图显示在网页上
        })
    })
</script>
</html>
js网页截图

推荐阅读
