经纬志
首页 / OpenLayers / 使用示例

地图导出为 PDF

等所有瓦片画完再合成画布,加上标题条,交给浏览器打印成单页 PDF。

OpenLayers 10.3.1 · 对应官方 export-pdf.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

导出流程分三步:等 map.once(rendercomplete) 保证瓦片画完;按图层顺序把各自 canvas 合成到一张大画布;把结果交给新窗口,由浏览器打印成 PDF。

合成时读取父容器的 opacity,避免导出图丢失图层透明度。官方示例借助 jsPDF 生成矢量 PDF,这里省掉第三方库,改用浏览器的「另存为 PDF」,版面尺寸与 A4 横向一致。

操作结果
导出 A4 版式生成 1123 × 794 的合成图并打开新窗口
新窗口按 Ctrl+P纸张选 A4 横向、边距为零,另存为 PDF
平移后再导出标题条刷新中心坐标与分辨率

瓦片必须带 crossOrigin: anonymous 才能进 canvas,否则 toDataURL 会因画布被污染而报错。