Firefox打印PDF时Leaflet地图模糊或缺失的解决咨询

问题描述 #

当使用Firefox的「保存为PDF」或「Microsoft打印到PDF」功能时，浏览器中显示正常的Leaflet地图，生成的PDF文件会出现模糊或部分缺失的情况。通过最小复现示例测试发现：

• Edge的「保存为PDF」或「Microsoft打印到PDF」功能输出正常；
• Firefox的「保存为PDF」会导致地图模糊；
• Firefox的「Microsoft打印到PDF」不仅让地图模糊，还会出现一半内容缺失的情况。

最小复现代码 #

<!DOCTYPE html>
<html lang="en">
   
    <head>
        <meta charset="UTF-8">
        <title>Minimal reproducible example</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
              integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
              crossorigin="">
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
                integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
                crossorigin=""></script>
    </head>

    <body>
        <div id="map" style="width: 300px; height: 300px"></div>

        <script>
            var map = L.map('map').setView([51.5, 0], 7);
            var layer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);
        </script>
    </body>

</html>

解决方法 #

• 调整Firefox打印分辨率
  打开打印界面后，点击「更多设置」，将「分辨率」设置为最高（如300DPI）。Firefox默认打印分辨率较低，会导致地图瓦片渲染模糊。

• 强制Leaflet使用Canvas渲染
  Leaflet默认部分元素采用SVG渲染，Firefox打印引擎对SVG的处理存在兼容性问题。初始化地图时添加preferCanvas: true参数，强制使用Canvas渲染，能有效提升打印清晰度和完整性：

  var map = L.map('map', { preferCanvas: true }).setView([51.5, 0], 7);
  

• 关闭「简化页面」功能
  在Firefox打印界面中，取消勾选「简化页面」选项。该功能会自动压缩或移除页面元素，可能导致地图内容缺失或模糊。

• 使用Leaflet专用打印插件
  借助Leaflet打印类插件（如leaflet-print），这类插件针对打印场景优化了地图渲染逻辑，能规避浏览器原生打印的兼容性问题。

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