利用截图实现导出功能

最新推荐文章于 2024-03-30 11:42:57 发布

原创最新推荐文章于 2024-03-30 11:42:57 发布 · 370 阅读

本内容遵循CC 4.0 BY-SA版权协议

1.导入这几个js
<script th:src="@{/css/js/canvg.js}"></script>
<script th:src="@{/css/js/highcharts.js}"></script>
<script th:src="@{/css/js/html2canvas.js}"></script>
<script th:src="@{/css/js/rgbcolor.js}"></script>
<script th:src="@{/css/js/stackblur.js}"></script>

2.导出按钮设置id,

3.设置下载位置

4.点击导出按钮触发时间，I123-content-wrap为所需要截图区域div的class

//导出功能
$("#button").click(function() {
    //以下是对svg的处理
    var nodesToRecover = [];
    var nodesToRemove = [];
    var svgElem = $(".I123-content-wrap").find('svg');//C123-chartOuter为需要截取成图片的dom的class
    svgElem.each(function (index, node) {
        var parentNode = node.parentNode;
        var svg = node.outerHTML.trim();
        var canvas = document.createElement('canvas');
        canvg(canvas, svg);
        if (node.style.position) {
            canvas.style.position += node.style.position;
            canvas.style.left += node.style.left;
            canvas.style.top += node.style.top;
        }
        nodesToRecover.push({
            parent: parentNode,
            child: node
        });
        parentNode.removeChild(node);
        nodesToRemove.push({
            parent: parentNode,
            child: canvas
        });
        parentNode.appendChild(canvas);
    });
    html2canvas($(".I123-content-wrap"), {
        useCORS: true,
        allowTaint: true,
        height: $(".I123-content-wrap").outerHeight() + 500,
        width: $(".I123-content-wrap").outerWidth() + 30  ,
        dpi: window.devicePixelRatio,
        onrendered: function(canvas) {
            //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
            var timestamp = Date.parse(new Date());
            //把截取到的图片替换到a标签的路径下载
            $("#down1").attr('href',canvas.toDataURL());
            //下载下来的图片名字
            $("#down1").attr('download',timestamp + '.png') ;
            document.getElementById("down1").click();
            history.go(0);
        }
        //可以带上宽高截取你所需要的部分内容
    });

});