打印含Leaflet地图的bootstrap卡片时内容排版错乱问题求助

• 资源加载异常：新窗口使用相对路径引入CSS、JS文件，新窗口初始地址为空，相对路径无法正确匹配到资源文件，导致bootstrap样式、Leaflet样式未加载，直接引发排版错乱。同时固定1秒的延时无法保证所有资源加载完成，资源加载未结束就执行打印也会导致布局异常。
• Leaflet地图未重新初始化：仅复制了卡片的静态HTML结构，原页面的Leaflet地图是JS动态渲染的内容，复制的DOM没有关联地图实例，也没有重新执行初始化逻辑，地图容器的布局会完全错乱。
• 打印样式适配缺失：未针对打印介质做专门的样式适配，bootstrap的响应式规则在打印场景下的默认表现和屏幕端不一致，卡片、地图容器的宽高没有固定，打印时会自动缩放变形。
• 全局样式缺失：新窗口的body标签没有添加原页面的全局类（比如bootstrap需要的布局类、自定义全局样式类），导致依赖父类的卡片样式无法生效。

1. 替换资源路径：将新窗口引入的CSS、JS路径改为绝对路径，或者直接将样式内容内联写入新窗口的head标签，避免相对路径加载失败的问题。
2. 替换固定延时逻辑：不要使用固定1秒的延时触发打印，改为监听新窗口的load事件，确认所有资源加载完成后，先重新初始化卡片内的Leaflet地图，等地图渲染完成后再调用打印方法。
3. 新增打印专用样式：在print.css中添加打印媒体查询规则，固定卡片和地图容器的布局：

@media print {
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    padding: 20px;
  }
  .card {
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .leaflet-container {
    height: 400px !important;
    width: 100% !important;
  }
}

4. 可选优化方案：放弃新开窗口的实现逻辑，直接在原页面通过打印媒体查询控制元素显隐，给不需要打印的元素添加no-print类，打印时隐藏，要打印的卡片默认隐藏，触发打印时给对应卡片添加显式类显示，直接调用window.print()即可，避免DOM复制、资源加载的一系列问题。

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