做问卷的网站生成二维码/四川企业seo

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

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

1、引入js包

2、父页面html

3、子页面html

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);

});

};