js 以图片导出 div

//div背景设成白色style="background:#fff;"


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 setabc0(){
        var content =  $("#setabc0");
         html2canvas(content, {
                onrendered: function (canvas) {
                    //添加属性
                    canvas.setAttribute('id', 'thecanvas0');
                    //读取属性值
                    // var value= canvas.getAttribute('id');
                    document.getElementById('images').appendChild(canvas);
                    $("#images").hide()
                }
            });
            

            /*自动保存为png*/
            // 获取图片资源
            setTimeout(function(){
                var oCanvas = document.getElementById("thecanvas0");
                var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
                saveFile(img_data1, 'wenjian0');
            },300)
    }
原文地址:https://www.cnblogs.com/yang1018/p/10191901.html