导出功能直接写在了index.html中,对应https://openlayers.org/en/latest/examples/export-pdf.html
问题:错误提示Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常https://blog.csdn.net/u013040887/article/details/78986598
尝试失败1:尝试过div转svg,svg转canvas,
var divContent = document.getElementById("map").innerHTML;
var divsvg = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
divContent +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = divsvg;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.crossOrigin="anonymous";
img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";
ctx.drawImage(img, 0, 0);
var canvasbase = canvas.toDataURL();
但是导出的图是黑色的。
网上确定能实现的方法1是在后端用C#调用浏览器直接截图https://forums.asp.net/t/1772000.aspx
2是对tomcat服务器下手,将服务器配置为允许图形文件可以从互联网上的任何地方跨源访问https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
PS:在QQ浏览器下可以保存为pdf(使用的好像是IE内核)