Question

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

这适用于Firefox和Chrome，但不适用于IE11或Edge，这些都会导致错误。 IE：“HierarchyRequestError” 边缘：“没有这样的界面支持”

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

通过使用建议here的图像outerHTML设置body innerHTML来解决这个问题。

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

appendChild dataURI图像到windows.open在IE中失败

1 个答案: