Openlayers 3 在Openlayers 3中打印（pdf）

我为openlayers 3制作了一个打印工具，它以PDF格式打印。这是我要用pdf打印的代码

var dims = {
  a0: [1189, 841],
  a1: [841, 594],
  a2: [594, 420],
  a3: [420, 297],
  a4: [297, 210],
  a5: [210, 148]
  };

  var exportElement = document.getElementById('export-pdf');

  exportElement.addEventListener('click', function(e) {

  if (exportElement.className.indexOf('disabled') > -1) {
    return;
  }
  exportElement.className += ' disabled';

  var format = document.getElementById('format').value;
  var resolution = document.getElementById('resolution').value;
  var buttonLabelElement = document.getElementById('button-label');
  var label = buttonLabelElement.innerText;
  var dim = dims[format];
  var width = Math.round(dim[0] * resolution / 25.4);
  var height = Math.round(dim[1] * resolution / 25.4);
  var size = /** @type {ol.Size} */ (map.getSize());
  var extent = map.getView().calculateExtent(size);

  map.once('postcompose', function(event) {
    //var tileQueue = map.getTileQueue();

    // To prevent potential unexpected division-by-zero
    // behaviour, tileTotalCount must be larger than 0.

    //var tileTotalCount = tileQueue.getCount() || 1;
    var interval;
    interval = setInterval(function() {
      //var tileCount = tileQueue.getCount();
      //var ratio = 1 - tileCount / tileTotalCount;
      //buttonLabelElement.innerText = ' ' + (100 * ratio).toFixed(1) + '%';
      //if (ratio == 1 && !tileQueue.getTilesLoading()) {
        clearInterval(interval);
        buttonLabelElement.innerText = label;
        var canvas = event.context.canvas;
        var data = canvas.toDataURL('image/jpeg');
        var pdf = new jsPDF('landscape', undefined, format);
        pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
        pdf.save('map.pdf');
        map.setSize(size);
        map.getView().fitExtent(extent, size);
        map.renderSync();
        exportElement.className =
            exportElement.className.replace(' disabled', '');
     // }
    }, 100);
  });

  map.setSize([width, height]);
  map.getView().fitExtent(extent, /** @type {ol.Size} */ (map.getSize()));
  map.renderSync();

}, false);

当我只有OSM图层时，我可以以PDF格式打印，但当我从geoserver添加本地图层时，我无法打印任何内容，整个应用程序都被冻结

谁能告诉我我做错了什么

我正在使用jspdf打印pdf

---

AJ

您的问题是您从其他域加载图像，但尚未为CORS配置它们。有关跨原点图像使用的说明，请参见

为了从画布中获取数据，放入其中的所有图像必须来自同一个域，或者使用相应的

访问控制允许源文件
标题进行传输

我将研究如何设置您的服务器，以便为带有这些标题的地图图像提供服务。您还应该查看ol3源上的
交叉源
选项。
CORS的解决方案很少。
非常简单的解决方案是通过您的后端服务器（用户后端OSM）代理OSM请求，但这样我们就不会有更多的服务器负载。
控制台中有错误消息吗？是否在OSM/geoserver层上设置了crossOrigin选项？我得到“SecurityError:操作不安全。printmap.js:45:0”var data=canvas.toDataURL（'image/jpeg'）；这行我没有在我的OSM/geoserver层上发送任何内容。谢谢。我也要看一看。我希望你能帮我解决这个问题。我想知道你是否解决了这个问题？我被困在同一个问题上，我在我的geoserver中添加了跨源过滤器，但它仍然不起作用。任何人的帮助？是的，我能够解决这个问题。你还需要帮助吗@Abhijit Gujar？是的，我想知道。谢谢。哇，我刚碰到这个问题。他怀疑CORS是否会成为印刷问题的罪魁祸首，但答案是肯定的。