html2canavs实现iframe嵌套下svg图形导出

在用html2canva实现前端图片导出的过程中遇到的问题，记录一下

html2canvas最新版本已经支持svg中图形的转换，iframe嵌套下的普通页面也支持转换成图片，在实现过程中发现，iframe下嵌套的如果是svg图像，那么导出的是一片空白，尝试以下解决方法，测试可行。

1、引入js包

<script src="html2canvas.js"></script>
<script src="canvas2image.js"></script>

2、父页面html

<body>
    <iframe name='iframe' src="001.html" width="100%" height="600"></iframe>
    <input type="button"  id="bnt" value="导出图片" />
</body>

3、子页面html

<body>
    <div id="box">
        <h2>Highchart曲线</h2>
          // hihgchart绘制的曲线图
        <div id="container" style="width:600px;height:400px;"></div>
    </div>
</body>

4、js代码

document.getElementById('bnt').onclick = function(){ 
    // 获取iframe 嵌套下需要导出的内容
    var iframeContent = window.frames["iframe"].document.getElementById("box"); 
    // 在父页面创建一个容器
    var fillContent = document.createElement('div')
    // 把需要转换成图片的元素内容赋给创建的元素
    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
    };

    html2canvas(fillContent, opts).then(function (canvas) {
        var url = canvas.toDataURL('image/png')
        // 生成一个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);
    });
};

html2canavs实现iframe嵌套下svg图形导出

推荐阅读更多精彩内容