Question

从this开始，我终于设法将数据uri显示在IE中，现在只能替换文档中的其他对象。

我怀疑现在只是我未能正确实施它。

这是我打印布局的完整屏幕＆＃39;功能。

问题是现在数据uri图像正在替换徽标和图例。它应该坐在他们身后。到目前为止，我已经尝试将uri图像z-index设置为-1，以防它覆盖而不是替换其他对象。但是，我怀疑我实际上是用body.innerHTML = simg.outerHTML删除它们。

function screen(){

//hsl color value from mapbox gl feature layer.
var DesSiteColor = map.getPaintProperty('CBA Designated Sites','fill-color');
var CBACoastColor = map.getPaintProperty('CBA Coastal','fill-color');
var CBAGrassColor = map.getPaintProperty('CBA Grassland','fill-color');
var CBAHeathColor = map.getPaintProperty('CBA Heathland','fill-color');
var CBAWetColor = map.getPaintProperty('CBA Wetland','fill-color');
var CBAGeoColor = map.getPaintProperty('CBA Geological','fill-color');
var CBAWoodColor = map.getPaintProperty('CBA Woodland','fill-color');
var LineLineColor = map.getPaintProperty('Linear features (line)','fill-color');
var LineRegionColor = map.getPaintProperty('Linear features (region)','fill-color');
var StepColor = map.getPaintProperty('Stepping Stone','fill-color');
var NIAColor = map.getPaintProperty('Nature Improvement Area','fill-color');

var simg = new Image();
var dataURL = map.getCanvas('#map').toDataURL();

simg.id = 'simg';
simg.src = dataURL;
//console.log(simg.id);
//console.log(simg);

var mywindow = window.open('','Print','height=800,width=900');
var is_chrome = Boolean(mywindow.chrome);

    mywindow.document.write('<!DOCTYPE html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="./css/scr.css" type="text/css" />');
    mywindow.document.write('</head><body>');
    mywindow.document.write('<img class="limg" src="./img/logo.png" />');
    mywindow.document.write('<div class="locbox">Map Centre: '+clatlng+cgr+'</div>');
    //use conversion function to change hsl values to hex for browser compatability.
    mywindow.document.write('<div class="container"><div class="my-legend"><div class="legend-title">Legend</div><div class="legend-scale"><ul class="legend-labels">');    
    mywindow.document.write('<li><span style=background:'+color2color(DesSiteColor,"hex")+'></span>CBA Designated Sites</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBACoastColor,"hex")+'></span>CBA Coastal</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAGrassColor,"hex")+'></span>CBA Grassland</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAHeathColor,"hex")+'></span>CBA Heathland</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAWetColor,"hex")+'></span>CBA Wetland</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAGeoColor,"hex")+'></span>CBA Geology</li>');
    mywindow.document.write('<li><span style=background:'+color2color(CBAWoodColor,"hex")+'></span>CBA Woodland</li>');
    //mywindow.document.write('<li><span style=background:'+color2color(LineLineColor,"hex")+'></span>Linear features (line)</li>');
    mywindow.document.write('<li><span style=background:'+color2color(LineRegionColor,"hex")+'></span>Linear features</li>');
    mywindow.document.write('<li><span style=background:'+color2color(StepColor,"hex")+'></span>Stepping Stone</li>');
    mywindow.document.write('<li><span style=background:'+color2color(NIAColor,"hex")+'></span>NIA</li></ul></div>');
    mywindow.document.write('<div class="legend-source">Source: <a href="http://www.activenaturalist.org.uk/lcren/">LCR EN</a></div></div>');
    mywindow.document.write('</div></body></html>');

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

        if (is_chrome) {
            setTimeout(function () { // wait until all resources loaded 
                    mywindow.document.close();
                    mywindow.focus(); 
                    mywindow.print();  // change window to winPrint
                    mywindow.close();// change window to winPrint
            }, 600);
        } else {

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10
    mywindow.print();
    mywindow.close();       

    }
    return true;    
}

Answer 1

当您尝试追加跨文档元素时，IE抛出异常HierarchyRequestError，请尝试以下操作：

/{userId:.+}

appendChild数据URI替换IE中的其他对象

1 个答案: