使用 html2canvas 导出图片的一个示例

最新推荐文章于 2024-06-24 16:32:21 发布

java小工在路上

最新推荐文章于 2024-06-24 16:32:21 发布

阅读量517

点赞数

分类专栏：前端技巧文章标签：前端组件

本文链接：https://blog.csdn.net/qq_34812272/article/details/88128077

版权

前端技巧专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<script src="${ctx}/js/html2canvas.min.js"></script>
    <script type="text/javascript">
        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);
        };

        function takeScreenshot() {
            html2canvas(document.getElementsByClassName('content-wrapper'), {
                onrendered: function (canvas) {
                    var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                    console.log(imgUri);
                    saveFile(imgUri,"图片名.png");
                }
            });
        }
    </script>