生成 PDF 时，Puppeteer 不会加载本地存储的图像

Question

我正在尝试在 Electron 应用程序中使用 Puppeteer 和 Handlebars 生成 PDF。但是.PDF文件中没有显示图像，我尝试使用无头模式进行调试，但没有发现任何有用的东西。

我的文件夹结构是：

+-- pdf_template
|   +-- generatePDF.js
|   +-- template.html
|   +-- template.css
|   +-- logo.png
|   +-- bg.png

generatePDF.js :

try {
    (async () => {
        var dataBinding = {
            total: 123456,
        };

        var templateHtml = fs.readFileSync(
            path.join(
                process.cwd(),
                '/app/pages/pdf_template/template.html'
            ),
            'utf-8'
        );

        var template = handlebars.compile(templateHtml);
        var finalHtml = template(dataBinding);
        var options = {
            path: 'report.pdf',
            printBackground: true,
            format: 'A4',
        };

        const browser = await puppeteer.launch({
            args: ['--no-sandbox'],
            headless: true,
        });

        const page = await browser.newPage();
        await page.goto(
            `data:text/html;charset=UTF-8,${encodeURIComponent(finalHtml)}`,
            {
                waitUntil: ['domcontentloaded', 'networkidle0', 'load', 'networkidle2'],
            }
        );

        await page.addStyleTag({
            path: __dirname + '/node_modules/bootstrap/dist/css/bootstrap.min.css',
        });
        await page.addStyleTag({
            path: __dirname + '/app/pages/pdf_template/template.css',
        });

        await page.emulateMedia('screen');

        await page.pdf(options);
        await browser.close();

        console.log('Done: PDF is created!');
    })();
} catch (err) {
    console.log('ERROR:', err);
}

template.html:

<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8" />
        <title>Report</title>

    </head>
    <body>
        <div class="row" id="header">
            <div class="col" id="logo-box">
                <img
                    src="logo.png"
                    id="logo"
                />
            </div>
            <div class="col-8">
                ...
        </div>

        ...
    </body>
</html>

template.css

body {
    background-image: url('bg.png');
    background-size: cover;
    width: 21cm;
    height: 29.7cm;
    padding: 15mm;
    margin: 0;
}

HTML 和 CSS 中的图片均未显示。我错过了什么吗？

Answer 1

可以在这里找到答案：

似乎生成的页面 URL 是 about:blank chromium 出于安全原因不允许加载本地资源。我设法通过在我的 HTML 模板中包含图像的二进制文件来绕过这个问题：

//In CSS
background-image: url("data:image/png;base64,BINARY_CHUNKS");
//In HTML
<img src="data:image/png;base64,BINARY_CHUNKS" class="logo">

至于以二进制形式获取本地文件，我建议 fs:

fs.readFileSync(`${process.cwd()}\your_image_path.png`).toString('base64')

希望有人发现有用！

生成 PDF 时，Puppeteer 不会加载本地存储的图像

Puppeteer does not load images stored locally when generate PDF

html

javascript

pdf

pdf-generation

puppeteer