iframe嵌套下svg图形导出（Downloadify兼容IE浏览器）

承接上一篇，上一篇的内容在谷歌和火狐下运行完好，IE（世界上为什么会有IE的存在）下毫无反应，是因为IE下不支持a标签helf值为base64格式的下载

IE10及以上浏览器的msSaveBlob和 msSaveOrOpenBlob方法允许用户在客户端上保存文件，可以利用此特性

所以在上一篇的基础上js代码做如下修改

// 引入canvg.js 用于将svg转化成canvas

js代码

document.getElementById('bnt').onclick = function() {
    // 获取iframe 嵌套下需要导出的内容
    var iframeContent = window.frames["iframe"].document.getElementById("box");
    // 在父页面创建一个容器
    var fillContent = document.createElement('div')
    fillContent.style.position = 'absolute';
    fillContent.style.top = "-99999px";
    // 把需要转换成图片的元素内容赋给创建的元素
    fillContent.innerHTML = iframeContent.outerHTML;
    document.body.appendChild(fillContent);

    var width = iframeContent.offsetWidth;
    var height = iframeContent.offsetHeight;
    var canvas = document.createElement("canvas");
    var scale = 2;
    //将 canvas 的宽高设置成容器宽高的 2 倍
    canvas.width = width * scale;
    canvas.height = height * scale;
    //将画布缩放，将图像放大两倍画到画布上,提高清晰度
    canvas.getContext("2d").scale(scale, scale);

    //html2canvas参数
    var opts = {
        scale: scale,
        canvas: canvas,
        logging: true,
        width: width,
        height: height
    };
 // 将svg图片转化成canvas图片，解决ie下iframe嵌套svg图片导出为空白的问题
    var nodesToRecover = [];
    var nodesToRemove = [];
    var svgElem = $(fillContent).find('svg'); 
    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(fillContent, opts).then(function(canvas) {
        var url = canvas.toDataURL('image/png');
        if (window.navigator.msSaveOrOpenBlob) {
            // 经过 base-64 编码的字符串进行解码
            var bstr = atob(url.split(',')[1])
            var n = bstr.length
            //创建初始化为0的，包含n个元素的无符号整型数组
            var u8arr = new Uint8Array(n)
            while (n--) {
                // 赋值给数组
                u8arr[n] = bstr.charCodeAt(n)
            }
            // 创建blob对象
            var blob = new Blob([u8arr])
            window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
        } else {
            // 生成一个a元素
            var a = document.createElement('a')
            a.download = name || 'myChart'
            // 将生成的URL设置为a.href属性
            a.href = url
            // 触发a的点击事件
            if (document.all) {
                a.click();
            } else if (document.createEvent) {
                var ev = document.createEvent('MouseEvents');
                ev.initEvent('click', false, true);
                a.dispatchEvent(ev);
            }
        }
        document.body.removeChild(fillContent);
    });
};

//  给svg元素对象添加outerHTML方法
Object.defineProperty(SVGElement.prototype, 'outerHTML', {
        get: function () {
            var $node, $temp;
            $temp = document.createElement('div');
            $node = this.cloneNode(true);
            $temp.appendChild($node);
            return $temp.innerHTML;
        },
        enumerable: false,
        configurable: true
    });

此方法适用于IE10及以上浏览器，iE9及以下浏览器不支持navigator.msSaveOrOpenBlob方法，若要实现纯前端导出，可使用Downloadify进行下载

基于Flash的导出插件，纯js实现，可以跨浏览器，需要FLASH PLAYER 10或更高版本

// 引入Downloadify

// IE浏览器判断
function isIE(){
      if (!!window.ActiveXObject || "ActiveXObject" in window){
          return true; 
       }else{
          return false; 
       }
  }  

父页面html结构修改

js部分做如下修改

document.getElementById('bnt').onclick = function() {
    // 获取iframe 嵌套下需要导出的内容
    var iframeContent = window.frames["iframe"].document.getElementById("box");
    // 在父页面创建一个容器
    var fillContent = document.createElement('div')
    fillContent.style.position = 'absolute';
    fillContent.style.top = "-99999px";
    // 把需要转换成图片的元素内容赋给创建的元素
    fillContent.innerHTML = iframeContent.outerHTML;
    document.body.appendChild(fillContent);

    var width = iframeContent.offsetWidth;
    var height = iframeContent.offsetHeight;
    var canvas = document.createElement("canvas");
    var scale = 2;
    //将 canvas 的宽高设置成容器宽高的 2 倍
    canvas.width = width * scale;
    canvas.height = height * scale;
    //将画布缩放，将图像放大两倍画到画布上,提高清晰度
    canvas.getContext("2d").scale(scale, scale);

    //html2canvas参数
    var opts = {
        scale: scale,
        canvas: canvas,
        logging: true,
        width: width,
        height: height
    };

    var nodesToRecover = [];
    var nodesToRemove = [];
    // 将svg图片转化成canvas图片，解决ie下iframe嵌套svg图片导出为空白的问题
    var svgElem = $(fillContent).find('svg');
    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(fillContent, opts).then(function(canvas) {
        var url = canvas.toDataURL('image/png');
        if (isIE()) {
            Downloadify.create('downloadify', {
                filename: function() {
                    return 'myChar.pngt';
                },
                data: function() {
                    return url.split('base64,')[1]
                },
                onComplete: function() {
                    alert('保存成功')
                },
                onCancel: function() {
                    alert('取消保存')
                },
                onError: function() {
                    alert('保存出错')
                },
                swf: '/js/load/media/downloadify.swf',
                downloadImage:'/js/load/images/download.png',
                width: 100,
                height: 30,
                dataType: "base64",
                transparent: true,
                append: false
            });
        } else {
            // 生成一个a元素
            var a = document.createElement('a')
            a.download = name || 'myChart'
            // 将生成的URL设置为a.href属性
            a.href = url
            // 触发a的点击事件
            if (document.all) {
                a.click();
            } else if (document.createEvent) {
                var ev = document.createEvent('MouseEvents');
                ev.initEvent('click', false, true);
                a.dispatchEvent(ev);
            }
        }
        document.body.removeChild(fillContent);
    });
};

Downloadify用法可以参考 http://www.github.com/dcneiner/Downloadify