Question

我为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打印，但是当我从我的地理服务器添加本地图层时，我无法打印任何内容，整个应用程序都会被冻结。

谁能告诉我这里我做错了什么？

我正在使用jspdf来打印pdf。

AJ

Answer 1

您的问题是您从其他域加载图像，并且尚未为CORS配置图像。有关跨原始图像使用的说明，请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image。

为了从画布中获取数据，放入其中的所有图像必须来自同一个域，或者使用相应的Access-Control-Allow-Origin标头进行传输。

我会调查如何设置服务器以使用这些标头提供地图图像。您还应该查看ol3源上的crossOrigin选项。

Answer 2

CORS的解决方案很少。非常简单的解决方案是通过后端服务器（用户＆lt; - ＆gt;后端＆lt; - ＆gt; OSM）代理OSM请求，但是我们只需要更多的服务器负载。

在Openlayers 3中打印（pdf）

2 个答案: