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

Question

嗨，请咨询有关如何打印传单地图但添加内容的建议。 我们已经尝试过使用 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.
        });

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

Answer 1

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

你不能。 JS 或 CSS 代码无法知道用户是想用 DIN A4 纸、A3 纸还是 US letter 打印。 当前的技术充其量只是黑客。 最重要的是，没有已知的方法可以知道可打印区域的大小（纸张大小减去打印机强加的边距），也无法知道用户是否要使用打印缩放。

IMO，您最好的方法是：

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

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

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

2 -使用mm ， cm或in单位为你的CSS规则的长度。 例如：

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

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

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