在 puppeteer 中将屏幕截图转换为 pdf

Question

我生成了 html 文档的屏幕截图，因为我想生成自定义宽度的 pdf。 现在我正在尝试将屏幕截图转换为 pdf。 虽然我找到了一个库“pdfkit”，但是我们有什么办法可以使用 puppeteer 本身来做到这一点。

Answer 1

问题简化为将 jpeg（或任何图像）转换为 pdf。

• 读取图像文件的base64Encode。 确保向 puppeter 提供以下标志： --allow-file-access-from-files ， --enable-local-file-accesses accesses 以便 puppeter 可以访问您服务器中由 html 生成的本地屏幕截图图像文件-> 截图。

• 浏览 base64 data:image/png;base64,base64....页面

• 转换为pdf。

   const puppeteer = require('puppeteer'); const fs = require('fs'); function base64Encode(file) { var bitmap = fs.readFileSync(file); return new Buffer(bitmap).toString('base64'); } (async () => { const browser = await puppeteer.launch({args: ['--allow-file-access-from-files', '--enable-local-file-accesses']}); const page = await browser.newPage(); const image = 'data:image/png;base64,' + base64Encode('1.jpg'); await page.goto(image, {waitUntil: 'networkidle2'}); await page.pdf({path: 'output.pdf', format: 'A4'}); await browser.close(); console.log("done"); })();

Answer 2

试试这个解决方案，它会捕获可以作为参数传入函数的特定元素的屏幕截图，从 URL 然后将屏幕截图添加到 PDF

const puppeteer = require('puppeteer');
const fs = require('fs');

function base64Encode(file) {
    var bitmap = fs.readFileSync(file);
    return new Buffer(bitmap).toString('base64');
}

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});

    await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle0'});

    async function screenshotDOMElement(opts = {}) {
        const padding = 'padding' in opts ? opts.padding : 0;
        const path = 'path' in opts ? opts.path : null;
        const selector = opts.selector;

        if (!selector)
            throw Error('Please provide a selector.');

        const rect = await page.evaluate(selector => {
            const element = document.querySelector(selector);
            if (!element)
                return null;
            const {x, y, width, height} = element.getBoundingClientRect();
            return {left: x, top: y, width, height, id: element.id};
        }, selector);

        if (!rect)
            throw Error(`Could not find element that matches selector: ${selector}.`);

        return await page.screenshot({
            path,
            clip: {
                x: rect.left - padding,
                y: rect.top - padding,
                width: rect.width + padding * 2,
                height: rect.height + padding * 2
            }
        });
    }

    await screenshotDOMElement({
        path: 'element.png',
        selector: 'header aside',
        padding: 16
    });

    browser.close();
    captureDomTOoPDF();
})();


function captureDomTOoPDF(){
    

    
    (async () => {
        const browser = await puppeteer.launch({args: ['--allow-file-access-from-files', '--enable-local-file-accesses']});
        const page = await browser.newPage();
        const image = 'data:image/png;base64,' + base64Encode('element.png');
        await page.goto(image, {waitUntil: 'networkidle0'});
        await page.pdf({path: 'output.pdf', format: 'A4'});
    
        await browser.close();
        console.log("done");
    })();
    

}

Answer 3

是的，在这里查看： puppeteer pdf doc

还有来自办公室文档的示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});

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