打印帶有附加內容的傳單地圖

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提示。 請注意，這是實驗性的（在撰寫本文時），只是一個提示，一個建議。 瀏覽器可以隨意忽略這一點。