Блог

Я пытаюсь сгенерировать PDF-файл с веб-страницы. Теперь, как вы можете видеть на добавленном мной изображении, я хотел бы сгенерировать PDF-файл из элемента, окруженного красной рамкой.

Я думал, что смогу заставить это работать, установив для элементов width и height значение 595px и 842px во внешнем интерфейсе и в окне просмотра await page.setViewport({ width: 595, height: 842, deviceScaleFactor: 1 }); .

Почему сгенерированный pdf-файл содержит все эти ненужные пробелы? И как я могу сгенерировать pdf-файл, который соответствует всему элементу?

Просто для пояснения, я не могу использовать page.setContent , так как большая часть данных будет динамической, и я также должен сохранить CSS.

Мой полный код:

 async function generatePDF() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({ width: 595, height: 842, deviceScaleFactor: 1 });
    await page.goto("http://localhost:8080", { waitUntil: 'networkidle2' });

    const options = {
        path: "invoice.pdf",
        pageRanges: '1',
        format: "a4",
        printBackground: true,
    }
    await page.pdf(options);
    await browser.close();
}
  

pdf не зависит от области просмотра. Это не работает как screenshot функция, это больше похоже на действие печати, которое зависит от формата бумаги.

Вы могли бы попробовать передать height and width в pdf функцию:

 const options = {
    path: "invoice.pdf",
    pageRanges: '1',
    width: "595px",
    height: "842px",
    printBackground: true,
}