Полностраничный PDF в Puppeteer

Я пытаюсь получить полностраничный PDF-файл, используя puppeteer, и мой код выглядит так: Но в результате получается несколько страниц с высотой, равной высоте страницы.

Как мне это решить? ТИА.

const puppeteer = require("puppeteer");

function sleep(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    });
}

(async () => {
    const browser = await puppeteer.launch({
        headless: true
    });

    const page = await browser.newPage();

    await page.goto("http://localhost:3000/longpage", {
        waitUntil: "networkidle2"
    });

    let height = await page.evaluate(
        () => document.documentElement.offsetHeight
    );

    console.info("Height", height);

    await page.pdf({
        path: "hni.pdf",
        printBackground: true,
        margin: "none",
        height: height + "px"
    });

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

к странице привязан какой-либо css? Используете ли вы разрывы страниц?

— 10.04.2019 17:05

@karthick Да, у него есть CSS как для мультимедиа, так и для печати. Я развернул веб-страницу по адресу блаженный-бункер-cf61f9.netlify.com. Не могли бы вы взглянуть?

— 10.04.2019 19:07

javascript node.js pdf puppeteer

10.04.2019 12:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

10 731

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

страница, которую вы связали использует Bootstrap, в наборе которого есть следующее правило (вы можете найти его здесь):

@page{size:a3}

Это ограничит высоту страницы размером a3.

Вы можете либо удалить правило (или вообще Bootstrap) с веб-сайта, либо добавить следующий код перед вызовом page.pdf:

await page.addStyleTag({
    content: '@page { size: auto; }',
})

Эй, Томас, это работает, он печатает все на одной странице, но печатает мобильную версию вместо @media print. Если я использую page.emulateMedia("print");, это все равно мобильная версия. Но это многостраничный PDF-файл с высотой печати :/

— 11.04.2019 06:29

Эй, мне удалось заставить его работать, используя ваш ответ с небольшой настройкой. Вместо од auto поставил вот так - content: @page { size:${width}px ${height}px;}. Я получаю width и height, используя offsetHeight и offsetWidth соответственно.

— 11.04.2019 18:57

@Nithin Хорошо, не стесняйтесь редактировать ответ, если хотите добавить его к ответу :)

— 11.04.2019 20:09

Да, добавлю это как комментарий.

— 12.04.2019 09:10

Я использую тот же код выше. Но у меня высота страницы 7500px. Содержимое за пределами 6000 пикселей не печатается в PDF. Не могли бы вы помочь с этим @Nithin и Thomas Dondorf. Заранее спасибо.

— 27.08.2020 11:11

Я также задал его как отдельный вопрос, вы можете обратиться к этому stackoverflow.com/questions/63603589/… для получения более подробной информации. Может ли кто-нибудь помочь в этом.

— 31.08.2020 15:23

10.04.2019 19:25