在用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);
});
};
