将子数据 URI 图像附加到 window.open 在 IE 中失败

Question

我正在尝试使用 dataURI 从交互式地图中抓取图像。然后将该图像附加到新的 window 布局以供打印。

这在 Firefox 和 Chrome 中有效，但在 IE11 或 Edge 中无效，它们都会抛出错误。即："HierarchyRequestError" 边缘："No such interface supported"

This question 非常相似但没有答案，所提供的解决方案与图像数据以外的对象相关。

我怀疑 this method 可能有效，但我不知道如何为 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;    
}

Answer 1

已通过按照建议使用图片 outerHTML 设置 body innerHTML 解决此问题 here。

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

将子数据 URI 图像附加到 window.open 在 IE 中失败

appendChild dataURI image to window.open failing in IE

javascript

internet-explorer

appendchild

window.open

data-uri