如何使用JsPDF导出OpenLayers当前地图视图至PDF

嘿，我之前在做OpenLayers地图导出的时候，也踩过官方PDF示例里视图缩小的坑！结合你用到WMS、图像图层的场景，给你几个亲测有效的解决方案：

方法一：完全复刻当前视图参数，避免缩放偏差 #

官方示例里的缩放计算经常因为固定倍数或者DPI转换问题，导致导出的视图和当前显示不一致。最稳妥的方式是直接基于当前地图的分辨率、范围和尺寸来构建导出用的临时地图，确保1:1匹配：

function exportCurrentView() {
  // 替换成你的地图实例
  const originalMap = yourMapInstance;
  const originalView = originalMap.getView();
  const mapSize = originalMap.getSize();
  // 获取当前视图的核心参数
  const currentResolution = originalView.getResolution();
  const currentExtent = originalView.calculateExtent(mapSize);

  // 创建临时导出地图，复用所有图层（克隆避免影响原地图）
  const exportMap = new ol.Map({
    layers: originalMap.getLayers().getArray().map(layer => layer.clone()),
    view: new ol.View({
      projection: originalView.getProjection(),
      // 直接复用当前分辨率和范围，确保视图完全一致
      resolution: currentResolution,
      extent: currentExtent
    }),
    size: mapSize, // 尺寸和原地图完全相同
    target: document.createElement('div') // 临时容器，不用挂载到DOM
  });

  // 用html2canvas渲染临时地图，再导出为PDF
  html2canvas(exportMap.getViewport()).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const docDefinition = {
      content: [{
        image: imgData,
        width: mapSize[0],
        height: mapSize[1]
      }]
    };
    pdfMake.createPdf(docDefinition).download('current-map-view.pdf');
    // 导出后销毁临时地图，释放资源
    exportMap.setTarget(null);
  });
}

这个方法的核心是让临时地图和原地图的视图参数完全对齐，导出的内容就是你当前看到的画面，不会有缩小或者偏移。

方法二：针对WMS图层的特殊适配 #

WMS图层是动态请求瓦片的，克隆图层时可能会丢失部分参数，导致导出时请求的图像范围和当前视图不匹配。可以在克隆WMS图层后，手动更新请求参数：

// 克隆图层时单独处理WMS图层
const clonedLayers = originalMap.getLayers().getArray().map(layer => {
  const clonedLayer = layer.clone();
  if (clonedLayer instanceof ol.layer.Tile && clonedLayer.getSource() instanceof ol.source.TileWMS) {
    const wmsSource = clonedLayer.getSource();
    // 强制WMS服务返回和当前视图匹配的图像
    wmsSource.updateParams({
      BBOX: currentExtent.join(','),
      RESOLUTION: currentResolution,
      WIDTH: mapSize[0],
      HEIGHT: mapSize[1]
    });
  }
  return clonedLayer;
});

把这段代码替换掉方法一里的layers: originalMap.getLayers().getArray().map(layer => layer.clone()),，就能确保WMS图层导出的图像和当前视图完全一致。

方法三：移除官方示例中的固定缩放倍数 #

官方示例里的scale = 2这类固定缩放值是导致视图缩小的常见原因，如果你还是想用官方的逻辑，记得把缩放倍数调整为1，或者基于当前视图的实际需求计算：

官方示例中容易出问题的代码片段：

const scale = 2; // 固定缩放倍数会导致视图缩放
const printSize = [mapSize[0] * scale, mapSize[1] * scale];

你可以直接把scale设为1，或者完全去掉缩放逻辑，用原地图尺寸导出。

内容的提问来源于stack exchange，提问作者Seuss