web-dev-qa-db-ja.com

puppeteerヘッダーとfootertemplateが機能しない

これは、PDFを作成するための私のコードです。フッターとヘッダーが機能しないことを除いて、すべてがうまく機能します。それらは（私が思うに）そこにありますが、見えません。 displayHeaderFooter：trueを試してみましたが、ヘッダーに日付スタンプがあり、フッターに壊れたhtmlコードがいくつかあります（最後の図のように）。

async function createListenPdf(html, header, footer) {
try {
    var jobId = uuidv4();

    this.browser = await puppeteer.launch();
    const page = await browser.newPage();
    var viewport = {
        width:1165,
        height:1200
    }
    page.setViewport(viewport);
    page.on("console", msg => {
        for (let i = 0; i < msg.args.length; ++i) {
            console.log(`${jobId} - From page. Arg ${i}: ${msg.args[i]}`);
        }
    });

    await page.goto(`data:text/html,${html}`, { waitUntil: 'networkidle0' });   

    await page.emulateMedia('screen');

    console.log("Header footer");
    var buffer = await page.pdf({
         printBackground: true,         
         footerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; top:0;'>Hej</div>",
         headerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; bottom: 0;'>Footer</div>",
         //displayHeaderFooter: true, 
         margin:{
             top: "100px",
             bottom: "100px"
         }
    });

    console.log(`${jobId} - Done. Will return the stream`);
    return buffer;
}
finally {
    if (this.browser) {
        console.log(`${jobId} - Closing browser`);
        this.browser.close();
    }
}
 }

enter image description here

ご覧のとおり、私はどういうわけか灰色の領域のあるフッターを取得しました（なぜ灰色ののかわかりません）。 displayHeaderFooter：trueをオプションで有効にすると、次のようになります。

enter image description here

ヘッダーとフッター付きのhtmlを使用して、操り人形師でpdfを作成できた人はいますか？ここで彼らのAPIの説明では、それはかなり明白に見えますが、実際には機能しません。

https://github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/api.md

csspdfpuppeteer
6
Daniel Gustafsson

次のテンプレートを試してください。

headerTemplate: '<span style="font-size: 30px; width: 200px; height: 200px; background-color: black; color: white; margin: 20px;">Header 1</span>',
footerTemplate: '<span style="font-size: 30px; width: 50px; height: 50px; background-color: red; color:black; margin: 20px;">Footer</span>'

すべてのスタイリングプロパティがサポートされているわけではありません。position、top、bottomの使用は避けてください。

また、puppeteerの最新バージョンを使用していることを確認してください。

8
Tarun Lalwani

ちょうど問題にぶつかった。

headerTemplate/footerTemplateについての私の観察は次のとおりです。

  1. 少なくともfont-sizeを指定する必要があります（デフォルトでは1pxに設定されています。これは非常に小さい）：
headerTemplate: '<span style="font-size: 10px"> <span class="pageNumber"></span>/<span class="totalPages"></span></span>',

  1. 一部のCSSプロパティは実際には機能しません。 background-colorで成功しませんでしたが、これらのセクションの背景がペイントされていないことが原因である可能性があります。

  2. CSSスタイルシートの呼び出し、画像やフォントの読み込みなど、非同期コード（HTTPリクエストが必要）は許可されていません。
    したがって、CSSはインライン化する必要があります。以下に示すように、画像を追加するには、base-64でエンコードします。フォントに関しては、Puppeteerサーバーにインストールされると予想されるものに依存する必要があります。 base-64にも埋め込む方法があるかもしれませんが、私は試しませんでした。

const printPDF = async () => {
    const footer = `<footer style="margin: auto; width: 40%">
            <img style="float: left; marginRight: 8px; marginLeft: 36px; width: 25%" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB...09Yv//Z" alt="Pivohub" />
            <p style="font-family: arial; float: right; width: 55%; color: red; margin-top: 24px; font-size: 10px">
                <b>My footer</b>
            </p>
        </footer>`

    const content = `<!DOCTYPE html>
        <html>
            <head>
                <meta charSet="utf-8"/>
                <style type="text/css">
                    body { backgroundColor: "red" }
                </style>
            </head>
            <body>
                <h1>Hello</h1>
            </body>
        </html>`

    const browser = await puppeteer.launch({ headless: true })
    const page = await browser.newPage()
    await page.setContent(content, { waitUntil: "networkidle0" })
    const buffer = await page.pdf({
        format: "A4",
        displayHeaderFooter: true,
        headerTemplate: '<span style="font-size: 10px"> <span class="pageNumber"></span> of <span class="totalPages"></span></span>',
        footerTemplate: footer,
        margin: { top: "100px", bottom: "200px" },
        printBackground: true,
    })
}

このサンプルでは、​​base64イメージが切り捨てられました。 https://www.base64-image.deなどのオンラインbase-64コンバーターを使用すると、画像を変換できます。

3
arvymetal

上記のコードが機能しなかった場合。 marginオブジェクトの代わりにmarginTopとmarginBottomを使用してみてください。

var buffer = await page.pdf({
         printBackground: true,         
         footerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; top:0;'>Hej</div>",
         headerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; bottom: 0;'>Footer</div>",
         //displayHeaderFooter: true, 
         marginTop:"100px",
         marginBottom: "100px"
    });

注：nodejsでは機能します。レシピ「chrome-pdf」でjsreportを使用しています。操り人形師を使用したchrome-pdfモジュール。

0
user3734654