在创建 PDF 的页脚内打印变量

Question

我需要在页面页脚内打印一个对象字段。目前我有：

async function createPdf(obj, res) {
        //other code
        const pdf = await page.pdf({ 
        format: 'A4', 
            printBackground: true, 
            displayHeaderFooter : true,
            headerTemplate : "",
        footerTemplate : "<style>.footer{width: 100%; font-size:12px; text-align:right; color:white; background:#161719; -webkit-print-color-adjust:exact; margin-bottom:-15px;}</style><div class='footer'><span>page </span><span class='pageNumber'></span>/<span class='totalPages'></span></div>",
            //margin top 0 removes header
            margin: {top: "00", bottom: "18"}
        });
        //other code
}

我需要在页脚内打印一些 obj 过滤器，但我尝试过的所有方法都将 obj 打印为字符串而不是内容。有可能实现我的目标吗？

Answer 1

为了在使用 page.pdf(), you can use place the footerTemplate HTML inside of a template literal (``) 创建 PDF 时在页脚内打印变量，并在占位符 (${}) 内插入变量。

参见下面的示例：

const example = 'Hello, world!';

const pdf = await page.pdf({
  format: 'A4',
  printBackground: true,
  displayHeaderFooter: true,
  headerTemplate: '',
  footerTemplate: `<style>
                   .footer {
                     background: #161719;
                     color: #fff;
                     -webkit-print-color-adjust: exact;
                     color-adjust: exact;
                     font-size: 12px;
                     margin-bottom: -15px;
                     text-align: right;
                     width: 100%;
                   }
                   </style>
                   <div class="footer">
                     <span>${example}</span> <!-- Variable Inside Footer -->
                     <span>page</span>
                     <span class="pageNumber"></span>/<span class="totalPages"></span>
                   </div>`,
  //margin top 0 removes header
  margin: {
    top: 0,
    bottom: 18,
  },
});

在创建 PDF 的页脚内打印变量

Print variable inside the footer of PDF creation

javascript

pdf-generation

node.js

google-chrome-devtools

puppeteer