Not allowed to navigate top frame to data URL,openlayer地图导出错误问题解决

266次阅读次阅读
没有评论

今天在做Openlayer地图导出功能时,参照官方的例子,想做到执行导出命令后图片自动下载到本地的效果,但是却给出了以下错误:

Not allowed to navigate top frame to data URL

下面是原始导出地图的代码:

let a = document.getElementById('a_export_map');
if (a) {
     a.href = mapCanvas.toDataURL();
     a.click();
} else {
     a = document.createElement('a');
     a.id = "a_export_map";
     a.style.display = "none";
     document.body.appendChild(a);
     a.href = mapCanvas.toDataURL();
     a.click();
}

仔细和官方代码对比之后,发现基本上并无差别啊。而且我记得以往直接在Chrome浏览器地址栏输入base64的字符串就可以显示图片,为什么这次出现这个问题呢。

后来经过我仔细观察之后发现,官方例子中给<a></a>标签加了download属性:

Not

而后,我在代码中给新加的<a></a>标签也加上了download属性,果然图片下载成功!

let a = document.getElementById('a_export_map');
 if (a) {
     a.href = mapCanvas.toDataURL();
     a.click();
 } else {
     a = document.createElement('a');
     a.id = "a_export_map";
     a.style.display = "none";
     document.body.appendChild(a);
     // 这一句必不可少
     a.download = "map.png";
     a.href = mapCanvas.toDataURL();
     a.click();
 }

原因是Chrome出于安全考虑,禁止从页面打开 Data URI,给<a></a>标签加上download属性后,浏览器识别后就会把图片从当前页面下载,而不是打开Data URI。

目前并没有在其他浏览器上测试是否有效。

另外,如果想在新标签页中打开图片,可参考下面链接的博文

https://blog.csdn.net/dangsh_/article/details/106823972

-End-

yuexs
版权声明:本站原创文章,由yuexs2021-02-01发表,共计2570字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)