appendChild dataURI映像到window.open在IE中失败

我正试图使用dataURI从交互式地图中获取图像。然后将该图像附加到新的窗口布局中进行打印。

这适用于Firefox和Chrome，但不适用于IE11或Edge，因为它们都会引发错误。IE:"层次结构请求错误"Edge："不支持此类接口"

这个问题非常相似，但没有答案，所提供的解决方案涉及图像数据以外的对象。

我怀疑这个方法可能有效，但我不知道如何为URI正确实现它。

在FF和Chrome中工作的当前代码；

function screen(){
var simg = new Image();
var dataURL = map.getCanvas('#map').toDataURL();
simg.src = dataURL;
var mywindow = window.open('about:blank','Print','height=800,width=900');
var is_chrome = Boolean(mywindow.chrome);
mywindow.document.write('<!DOCTYPE html><head>');
mywindow.document.write('<link rel="stylesheet" href="./css/scr.css" type="text/css" />');
mywindow.document.write('</head><body>'); 
//add logos and legend here.
mywindow.document.write('</div></body></html>');
mywindow.document.body.appendChild(simg);
        if (is_chrome) {
            setTimeout(function () { 
                    mywindow.document.close();
                    mywindow.focus(); 
                    mywindow.print();  
                    mywindow.close();
            }, 600);
        } else {
    mywindow.document.close(); 
    mywindow.focus(); 
    mywindow.print();
    mywindow.close();       
    }
    return true;    
}

这是通过使用此处建议的图像outerHTML设置主体innerHTML来解决的。

    try{
    mywindow.document.body.appendChild(simg);
    }
    catch(e){
    if (simg.outerHTML) {
    mywindow.document.body.innerHTML = simg.outerHTML;
    }
    else {
    //console.log('not working');
    }
    }

相关内容

最新更新

热门标签：