js 将html 内容保存/转换为图片 

<html>
<head>
    <style>
        .box {
            width: 600px;
            height: 300px;
            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="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

</head>
<body>
<div class='box' id="proMain"></div>
<input type="button" value="button" id="saveData">
生成界面如下：
</body>
<script type="text/javascript">
    //保存数据,把当前报表的数据保存为Png图片，在触发另存为...的同时，指定文件名和文件格式
    $('#saveData').click(function () {
        //#proMain:要截图的DOM元素
        //useCORS:true:解决跨域问题
        html2canvas(document.querySelector('#proMain'), {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>

参考: https://blog.csdn.net/qiankui/article/details/83183202

posted @ 2021-06-15 19:04  那时一个人  阅读(1766)  评论(0)  编辑  收藏  举报