Leaflet Browser Print如何在打印结果页眉中添加图片？

leaflet-browser-print插件默认页眉仅支持文本，要实现左右图片+中间文本的自定义页眉，可通过监听打印事件插入自定义DOM结构的方式解决，以下是具体实现：

方法一：提前定义页眉模板 #

1. 先在页面中添加隐藏的页眉HTML结构：

<div id="custom-print-header" style="display: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px;">
  <img src="左侧图片路径" alt="左标识" style="height: 50px;">
  <span style="font-size: 18px; font-weight: bold;">Webmap - Braganca Paulista</span>
  <img src="右侧图片路径" alt="右标识" style="height: 50px;">
</div>

2. 初始化打印控件并监听打印事件：

// 初始化打印控件，关闭默认页眉
const printControl = L.control.browserPrint({
  title: '...',
  documentTitle: '...',
  printModes: [
    L.BrowserPrint.Mode.Auto("A4", { 
      title: "Auto", 
      header: { 
        enabled: false, // 禁用默认页眉，使用自定义结构
        size: "25mm", 
        overTheMap: false 
      }
    }),
  ],
  // 自定义打印样式，确保页眉正常显示
  customPrintStyle: `
    #custom-print-header {
      display: flex !important;
      margin-bottom: 10px;
    }
    @page {
      margin: 30mm 10mm; /* 调整打印边距，避免页眉被裁剪 */
    }
  `
}).addTo(map);

// 监听打印开始事件，插入自定义页眉到打印容器顶部
map.on('browser-print-start', function(e) {
  const printContainer = e.printContainer;
  const customHeader = document.getElementById('custom-print-header').cloneNode(true);
  customHeader.style.display = 'flex';
  printContainer.insertBefore(customHeader, printContainer.firstChild);
});

方法二：动态创建页眉元素 #

如果不想提前写HTML模板，也可以在打印事件中直接动态生成页眉DOM：

const printControl = L.control.browserPrint({
  title: '...',
  documentTitle: '...',
  printModes: [
    L.BrowserPrint.Mode.Auto("A4", { 
      title: "Auto", 
      header: { enabled: false, size: "25mm", overTheMap: false }
    }),
  ],
  customPrintStyle: `
    @page {
      margin: 30mm 10mm;
    }
  `
}).addTo(map);

map.on('browser-print-start', function(e) {
  const printContainer = e.printContainer;
  
  // 创建页眉容器
  const headerDiv = document.createElement('div');
  headerDiv.style.cssText = 'width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px; margin-bottom: 10px;';
  
  // 添加左侧图片
  const leftImg = document.createElement('img');
  leftImg.src = '左侧图片路径';
  leftImg.style.height = '50px';
  headerDiv.appendChild(leftImg);
  
  // 添加中间文本
  const titleSpan = document.createElement('span');
  titleSpan.textContent = 'Webmap - Braganca Paulista';
  titleSpan.style.cssText = 'font-size: 18px; font-weight: bold;';
  headerDiv.appendChild(titleSpan);
  
  // 添加右侧图片
  const rightImg = document.createElement('img');
  rightImg.src = '右侧图片路径';
  rightImg.style.height = '50px';
  headerDiv.appendChild(rightImg);
  
  // 将页眉插入打印容器最顶部
  printContainer.insertBefore(headerDiv, printContainer.firstChild);
});

注意事项 #

• 确保图片路径正确：本地图片用相对路径，线上图片用完整URL；
• 调整@page的margin值，避免页眉被打印页面的边距裁剪；
• 可根据需求修改页眉的flex布局样式，比如调整图片大小、文本字体等。

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