当前位置: 首页 > 面试题库 >

尝试隐藏由Puppeteer生成的PDF上的第一个页脚/页眉

微生博简
2023-03-14
问题内容

我是新使用nodejs函数和puppeteer。以前我使用wkhtmltopdf,但目前它的选项非常差。

因此,我的想法是从带有第一个封面的html生成一个pdf(具有全A4宽度/高度的图像),因为页脚是从index.js生成的,所以无法将其隐藏在页面的第一页上PDF。

//Imports
const puppeteer = require('puppeteer');
//Open browser
async function startBrowser() {
    const browser = await puppeteer.launch({headless: true, args:['--no-sandbox']});
    const page = await browser.newPage();
    return {browser, page};
}
//Close browser
async function closeBrowser(browser) {
    return browser.close();
}
//Html to pdf
async function html2pdf(url) {
    const {browser, page} = await startBrowser();
    await page.goto(url, {waitUntil: 'networkidle2'});
    await page.emulateMedia('screen');
    //Options
    await page.pdf({
        printBackground: true,
        path: 'result.pdf',
        displayHeaderFooter: true,
        footerTemplate: '<div style="width:100%;text-align:right;position:relative;top:10px;right:10px;"><img width="60px" src="data:data:image/..."'
        margin : {top: '0px',right: '0px',bottom: '40px',left: '0px' },
        scale: 1,
        landscape: false,
        format: 'A4',
        pageRanges: ""
    });
}
//Exec
(async () => {
    await html2pdf('file:///loc/node_pdfs/givenhtml.html');
    process.exit(1);
})();

我的问题是,有什么方法可以找到第一个页脚并将其从索引功能中隐藏起来吗?

谢谢!


问题答案:

目前有多个错误,使它不可能得到这个工作。

目前这仅适用于使用此技巧的标头(取自此github评论):

await page.addStyleTag({
    content: `
        body { margin-top: 1cm; }
        @page:first { margin-top: 0; }
    `,
});

这将基本上隐藏第一页上的保证金,但不会工作使用底部边缘时(如还注意到这里)。

可能的解决方案

我建议的解决方案是创建两个PDF,一个只有第一页,没有空白,而另一个有其余页,只有空白:

await page.pdf({
    displayHeaderFooter: false,
    pageRanges: '1',
    path: 'page1.pdf',
});

await page.pdf({
    displayHeaderFooter: true,
    footerTemplate: '<div style="font-size:5mm;">Your footer text</div>',
    margin: {
        bottom: '10mm'
    },
    pageRanges: '2-', // start this PDF at page 2
    path: 'remaining-pages.pdf',
});

根据您需要执行任务的频率,您可以手动合并PDF或使用easy-pdf-merge之类的工具将其自动化(我自己没有使用过此工具)。



 类似资料:
  • 我尝试用木偶器生成pdf文件。它对一个页面很好,但当我尝试生成多页pdf文档时,我有一个bug的分页符。HTML模板用于下面生成。拜托,能帮我就帮我。复制的前提条件:以100%的高度填充第一页,并为下面的块添加标题。 HTML模板 生成PDF Bug在此输入图像描述

  • 用puppeteer生成网页的pdf,网页排版用的div(float)>table ,网页看是正常的,生成pdf就多了一点空隙 网页正常显示 pdf显示多了空白间隙 finderror.html createPdf.js 尝试: 与collapse无关 与添加page-break-after:always无关 希望获得的结果: 生成pdf与网页预览一致

  • 本文向大家介绍Puppeteer 爬取动态生成的网页实战,包括了Puppeteer 爬取动态生成的网页实战的使用技巧和注意事项,需要的朋友参考一下 Puppeteer 相关介绍与安装不过多介绍,可通过以下链接进行学习 一、Puppeteer 开源地址 英文文档 中文社区 二、爬取动态网页 1. 需求 首先,了解下我们的需求: 爬取zoomcharts 文档中 Net Chart 目录下所有访问连接

  • 我试图创建一个带有页眉和页脚的PDF。页眉和页脚都是图像。由于我的pdf创建了随机数量的页面,我需要自动将其添加到每一页。我知道我需要使用某种eventhandler。不幸的是,我找不到vb.net语言中的任何示例,我只能找到java/C#示例,我真的不擅长阅读/转换这些语言vb.net.我还不是编程专家。 谁能给我指一下正确的方向吗。 Edit4:删除的随机内容不再需要回答我的问题。 下面这段代

  • 我正在使用PDFSharp为客户端的PDF文档的第一页添加书签。客户提供多个不同页面的PDF文档,每个PDF都是一个人的一张账单。客户让我把账号放在第一页的书签里,这样他们就可以把它们组合在一起,用书签作为识别账号的手段处理一个PDF文件和许多账单。 我使用下面的代码成功地创建了书签,但是当客户端使用Ghost脚本将文件组合在一起时,所有书签都被分配到合并后的PDF上的第1页。当他们组合来自另一个

  • 目前正在用C#中的ITextSharp构建一个PDF。PDF由三个“部分”组成,一个封面,一个可以跨越多个页面的表格,以及一个最终页面。拥有该表的页面需要在第一页包含页眉,并在所有包含页眉的页面上包含页脚,但封面和最后一页不需要。 我使用XMLWorker构建页面,但这并不重要。构建页面的代码如下: 我遇到的麻烦是确定一种方法来防止页脚出现在结束页上。我正在重写OnEndPage以创建页脚。是否有