打印带有附加内容的传单地图答案

【问题标题】：Printing a leaflet map with additional content打印带有附加内容的传单地图
【发布时间】：2020-06-17 19:05:28
【问题描述】：

您好，就如何打印带有附加内容的传单地图征求意见。我们已经尝试了使用 custum 打印的 leaflet.browser.print。但在某些情况下，并非所有地图和汇总表都不会填满打印预览。

下面是实现代码：

         L.control.browserPrint({
            title: thisBlock.name,
            printModes: ["Custom"]
        }).addTo(map)

这就是我们所需要的——它必须始终显示完整的地图和下表：

但这就是它的显示方式 - 不是全屏：

也尝试添加事件：

        map.on("browser-print", function (e) {
            //Would like to resize the map with the summary table here to fit the page size preview.
        });

如何获取目标页面的尺寸和将放置在打印预览中的对象以及如何调整其大小。如果用户更改打印设置并且对象会相应地调整大小，它会起作用吗？

【问题讨论】：

标签： javascript dictionary printing leaflet

【解决方案1】：

如何获取目标页面的尺寸？

你不能。 JS 或 CSS 代码无法知道用户是想用 DIN A4 纸、A3 纸还是美国信纸打印。 current techniques 充其量是骇人听闻的。最重要的是，没有已知方法可以知道 可打印区域 的大小（纸张大小减去打印机施加的边距），也无法知道用户是否要使用打印缩放.

IMO，您最好的方法是：

1- 使用 CSS @media print 查询，例如：

@media print {
  #leaflet-map { border: 1px solid black; }
}

其中的 CSS 规则仅在打印时适用（而不是在屏幕上显示时）。阅读有关CSS @media here 的更多信息。

2- 使用 mm, cm or in units 作为 CSS 规则的长度。例如：

@media print {
  #leaflet-map { width: 17.5cm; height: 20cm; }
  #table-with-data { width:17cm; height: 5cm; }
}

请记住，这是浏览器应用print scaling之前的大小。您可能需要指示您的用户注意这一点，并始终以“100% 规模”打印内容。

3- 使用CSS @page size hint。请注意，这是实验性的（在撰写本文时），只是一个提示，一个建议。浏览器可以随意忽略这一点。

【讨论】：