Puppeteer игнорирует некоторые правила CSS для печати PDF, когда я использовал @media print

Question

Когда я использовал кукловод для печати html в pdf, я столкнулся со странной проблемой.Я считаю, что кукловод всегда игнорирует некоторые правила CSS, которые есть в @media print.

Вот мой env:

Версия Puppeteer: 1.11
Версия платформы / ОС: Win10 / CentOS7
Node.js версия: 10.15.0

Коды CSS:

@media print {
    .flipbook-viewport .flipbook{
        width: 794px!important;
        height: 1123px!important;
        max-height: 1123px;
        max-width: 794px;
        background-color: red;
    }

    .right-01 .image {
        width: 92%;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url('../image/content/test.png');
        height: 920px;
        /* width: 740px; */
        margin-top: 0.8rem;
    }
}

Вы можете заметить, что я установил цвет фона, чтобы проверить результат теста.В моем тесте, когда я выполнял кукловод с помощью page.emulateMedia ('print'), правила flipbook-viewport и flipbook работают нормально.Но право-01 и изображение не работали.

Но забавно то, что когда я использовал экран @media (также изменил page.emulateMedia на screen) с одинаковыми правилами, все они работали нормально.Поэтому я думаю, что у него могут быть проблемы с кукловодом.

Каков ожидаемый результат? good.pdf

Что происходит вместо этого? неправильно.pdf

Кто-нибудь сталкивался с этой проблемой раньше?Как решить эту проблему?Пожалуйста, помогите.

Пример кода моего кукловода:

const puppeteer = require('puppeteer-core');

(async () => {
    const browser = await puppeteer.launch({executablePath:'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'});
    const page = await browser.newPage();
    await page.goto('http://www.kaol.org/TurnPage/', {waitUntil: 'networkidle2'});
    await page.emulateMedia('print');
    await page.pdf({path: 'hn.pdf', format: 'A4', printBackground: true});
    await browser.close();
})();

Answer 1

puppeteer - это просто библиотека для управления Chrome / Chromium, поэтому, если что-то пойдет не так во время использования, лучше всего открыть Chromium с помощью puppeteer.launch({headless:false}) и отладить там.(Однако печать в PDF не поддерживается в режиме заголовка, поэтому мы можем просто использовать полнофункциональный браузер)

В Chrome DevTools имеется встроенная поддержка режима отладки печати, вот как это включить.на .

Включив это, после перезагрузки страницы я увидел 404 во вкладке сети: что фоновое изображение не может быть найдено.Это произошло потому, что когда вы переместили @media print из таблицы стилей на главную страницу, относительная ссылка ../image/content/20181206picture1.png разорвалась (раньше она была относительно местоположения таблицы стилей, но теперь она относительно местоположения страницы),

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

Answer 2

Из того, что я могу сказать, Puppeteer использует размеры экрана вашей машины, чтобы определить ширину и высоту, чтобы сначала сгенерировать страницу, а затем распечатать эту страницу в PDF, поэтому значения дисплея машины используются при использовании background-size: 100%.

. Вы можете явно передать размеры:

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }
}

А к вашему body добавить размер в размерах бумаги, чтобы они не были получены из системы:

background-size: 21cm 29.7cm;

Затем передайте флаги preferCSSPageSize и printBackground:

const pdf = await page.pdf({
    preferCSSPageSize: true,
    printBackground: true
});

Также кажется, что format: 'A4' в лучшем случае ничего не делает, когда ваш @page имеет размеры и в худшем случае, возможно, перекрывает часть вашегоCSS, так что я бы оставил это полностью.

Answer 3

Документация для печати в PDF кукловода перечисляет несколько возможных вариантов.Среди них также printBackground:

<boolean> Печать фоновой графики.По умолчанию установлено значение false.

Попробуйте установить это значение на true, чтобы включить фоновую графику и -цветы в экспорт PDF.