Как распечатать React компонент с картой react-leaflet?

Question

[HonestDaniel]

В общем у меня есть задача распечатать данный компонент на листе А4 точно также как он выглядит на экране. Как это можно сделать проще всего?

Comments

[Aetae]

Мужик, ты же понимаешь, что ты не можешь сделать настоящий скриншот страницы с помощью клиентского кода - это бы была огромная дыра в безопасности.
Все эти библитеки рисуют страницу заново в рамках pdf, пытаясь попасть максимально близко. Со сложными вещами типа карты - это не работет и работать не будет.

У тебя три варианта:
1. Использовать window.print() и научить юзера использовать стандартный функционал печати браузера. Браузер прекрасно всё распечатает сам как надо. Разве что со своей стороны тебе придётся немного пофиксить css под media print. Это предпочтительный вариант.
2. Заморачиваться и ручками получать как-то карту в виде картинки и вставлять руками же в pdf. Это не сложно если карта на canvas, иначе - хз.
3. Сделать бэкэнд сервис-принтер, который будет выдавать pdf(используя под капотом тот же браузерный принтер).

[HonestDaniel]

Aetae, Хорошо, попробую первый вариант

Получаю необходимый для распечатывания элемент

useEffect(() => {
        if (mark && isOpen) {
            const printContent = document.querySelector('.popup_content');
            if (printContent) {
                const printDiv = printContent.cloneNode(true) as HTMLElement;
                printDiv.style.display = 'block';
                document.body.appendChild(printDiv);
                window.print();
                document.body.removeChild(printDiv);
            }
        }
    }, [mark, isOpen]);

Приписываю ему необходимые мне стили:

.popup_content {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 202;
    position: relative;
    width: calc(100% - 208px); /* 104px с каждой стороны */
    height: 90vh;
    background: white;
    padding: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
}

@media print {
    .popup_content {
        display: flex;
        flex-direction: column;
        row-gap: 30px;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 202;
        position: relative;
        width: 100%; 
        height: 600px;
        background: red;
        padding: 50px;
    }
}

Да, карта видна, но во первых не полностью, во вторых стили из media print почему-то не применяются

[Aetae]

Ну тут уж дебажить тока. /g media print debug