Печать листовки с дополнительным контентом - PullRequest
Новая
       27

Печать листовки с дополнительным контентом

0 голосов
/ 05 марта 2020

Привет, спрашиваю совета о том, как распечатать листовки, но с добавленным содержанием. Мы попробовали leaflet.browser.print с использованием печати custum. Но в некоторых случаях не вся карта и сводная таблица не заполняют предварительный просмотр печати. ​​

Вот код реализации: 

         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.
        });

Как получить размеры целевой страницы и объекты, которые будут помещены в предварительный просмотр печати, а затем как изменить его размер. И сработает ли это, если пользователь изменит настройки печати и будет ли размер объектов соответствующим образом?

1 Ответ

0 голосов
/ 05 марта 2020

Как получить размеры целевой страницы?

Нельзя. Для кода JS или CSS нет способа узнать, хочет ли пользователь печатать на бумаге формата DIN A4, или A3, или букве США. современные методы в лучшем случае являются хаки sh. Кроме того, нет никакого известного способа узнать размер области печати (размер бумаги минус поля, наложенное принтером), и нет способа узнать, собирается ли пользователь использовать масштабирование печати.

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 намек . Обратите внимание, что это экспериментально (на момент написания этой статьи) и является лишь подсказкой, предложением. Браузеры могут игнорировать это.

...