承接上一篇，上一篇的内容在谷歌和火狐下运行完好，IE（世界上为什么会有IE的存在😭😭）下毫无反应，是因为IE下不支持a标签helf值为base64格式的下载
IE10及以上浏览器的msSaveBlob和 msSaveOrOpenBlob方法允许用户在客户端上保存文件，可以利用此特性
所以在上一篇的基础上js代码做如下修改
<script src="html2canvas.js"></script>
<script src="canvas2image.js"></script>
// 引入canvg.js 用于将svg转化成canvas
<script src="https://cdn.bootcss.com/canvg/1.5/canvg.js"></script>
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
<script src="Downloadify.js"></script>
// IE浏览器判断
function isIE(){
if (!!window.ActiveXObject || "ActiveXObject" in window){
return true;
}else{
return false;
}
}
父页面html结构修改
<body>
<iframe name='iframe' src="001.html" width="100%" height="600"></iframe>
<div id = "Downloadify">
<input type="button" id="bnt" value="导出图片" />
</div>
</body>
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
