Puppeteer 生成 PDF 时不加载本地存储的图像答案

【问题标题】：Puppeteer does not load images stored locally when generate PDFPuppeteer 生成 PDF 时不加载本地存储的图像
【发布时间】：2021-06-19 09:33:21
【问题描述】：

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

我的文件夹结构是：

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

生成PDF.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);
}

模板.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>

模板.css

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

来自 HTML 和 CSS 的图像均未显示。我错过了什么吗？

【问题讨论】：

标签： javascript html pdf pdf-generation puppeteer

【解决方案1】：

可以在这里找到答案：How to point Puppeteer to local images/fonts?

生成的页面 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')

希望有人发现这很有用！

【讨论】：