html2canvas（包含对svg的处理）

1 为处理svg，需引入canvg.js
下载链接：https://github.com/canvg/canvg

//以下是对svg的处理
var svgElem = $('#div_id').find('svg');
svgElem.each(function (index, node) {
    //获取svg的父节点
    var parentNode = node.parentNode;
    //获取svg的html代码
    var svg = node.outerHTML.trim();
    //创建一个<canvas>，用于放置转换后的元素
    var canvas = document.createElement('canvas');
    //将svg元素转换为canvas元素
    canvgv2(canvas, svg);
    //设置新canvas元素的位置
    if (node.style.position) {
        canvas.style.position += node.style.position;
        canvas.style.left += node.style.left;
        canvas.style.top += node.style.top;
    }

    //删除svg元素
    parentNode.removeChild(node);
    //增加canvas元素
    parentNode.appendChild(canvas);
});

2 引入 html2canvas

下载链接：https://github.com/niklasvh/html2canvas

new html2canvas(document.getElementById('div_id'), {
        x: 0,//解决滚动对导出位置的影响
        y: 0
    }).then(canvas => {
        if ($('#image_div').length === 0) {
            $('body').append('<a id="image_div" download="图片.jpg">');
        }
        var img = canvas.toDataURL("image/jpeg")
        img = img.replace('data:image/jpeg;base64,', '')
        var finalImageSrc = 'data:image/jpeg;base64,' + img

        $('#image_div').attr('href', finalImageSrc)
        $('#image_div')[0].click()
        $('#image_div').remove()
    });