Как распечатать 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

Answer 1

[historydev]

html to pdf => pdf to print

Comments

[HonestDaniel]

Смотри, я прописал вот такой useEffect у себя в компоненте, но с ним печатается все, кроме карты. На месте карты у меня просто серый прямоугольник. Не знаешь в чем проблема?

useEffect(() => {
        if (isOpen && mark) {
            const printContent = printRef.current;
            if (printContent) {
                toPng(printContent).then((imgData) => {
                    const pdf = new jsPDF('landscape', 'mm', 'a4');
                    const imgProps = pdf.getImageProperties(imgData);
                    const pdfWidth = pdf.internal.pageSize.getWidth();
                    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

                    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
                    pdf.autoPrint(); // Запускает печать сразу после создания PDF
                    window.open(pdf.output('bloburl'), '_blank');
                });
            }
        }
    }, [mark, isOpen]);

[HonestDaniel]

HonestDaniel, используется toPng из библиотеки html-to-image и jsPDF из jspdf

[historydev]

HonestDaniel, печать нужна только тебе, это не функционал?

[HonestDaniel]

historydev, В смысле только мне? Да, функционал. Нужно распечатать карту вместе с отмеченными на ней областями

[historydev]

HonestDaniel, Тогда пробуй скриншот: https://www.npmjs.com/package/use-react-screenshot

[HonestDaniel]

historydev, Попробовал. На скрине карта тоже не отображается почему-то

[HonestDaniel]

historydev, Есть еще один момент. У меня поверх карты svg слой. Может из-за этого она не отображается?

[historydev]

HonestDaniel,
Выясни как именно рисуется карта, поймёшь почему она не попадает на скриншот.
Попробуй не реактовский скриншот, почему-то мне кажется что он работает так-же как html в pdf.

Допустим любой инструмент который используется для скриншотного тестирования, вот например:
https://playwright.dev/docs/test-snapshots

[HonestDaniel]

historydev, Попробовал написать вот такой скрипт, но он почему-то не находит мой распечатываемый элемент по классу popup_content

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    console.log(page);
    await page.goto('http://localhost:3000');

    try {
        await page.waitForSelector('.popup_content', { timeout: 20000 });
        console.log('Element found');
    } catch (error) {
        console.error('Element not found within the timeout period:', error);
    }

    const element = await page.$('.popup_content');
    if (element) {
        await element.screenshot({ path: 'screenshot.png' });
        console.log('Screenshot taken');
    } else {
        console.error('Element not found for screenshot');
    }

    await browser.close();
})();

[historydev]

HonestDaniel, с этим сам