Puppeteer JS从选择器生成PDF

slo*_*ent 4 javascript pdf-generation html2pdf vue.js puppeteer

我熟悉Puppeteer在Vue.js应用程序中使用,但我无法弄清楚如何根据页面上的特定元素生成PDF.我可以基于整页成功创建PDF,但这并不理想.有没有我错过的方法或课程可以允许这个?我找不到一个可链接的page函数来按选择器过滤,如下所示:

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://what.a.fancy/website', {waitUntil: 'networkidle2'});
    await page.$('.just-this-html').pdf(options);
Run Code Online (Sandbox Code Playgroud)

我确实看到有一个page.$(selector)函数,但我不知道如何通过一个.then()可以访问返回的HTML到PDF 的调用来链接它.

谢谢!

aof*_*dev 6

试试这个代码. await page.setContent() page.setContent

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.google.com/', {waitUntil: 'networkidle2'});
const dom = await page.$eval('div.jsb', (element) => {
     return element.innerHTML
}) // Get DOM HTML
await page.setContent(dom)   // HTML markup to assign to the page for generate pdf
await page.pdf(options)
Run Code Online (Sandbox Code Playgroud)

  • 谢谢@aofdev!有没有办法保留已应用于页面的 CSS?当调用“setContent”时,它似乎丢失了。 (2认同)
  • 我刚刚发现了 `page.addStyleTag` 函数,这似乎有效。现在我只需要弄清楚如何动态循环页面上的`link[rel=stylesheet]` 标签...... (2认同)
  • 这是可行的,但唯一的问题是它不会保存 pdf 中内容的 css 样式。 (2认同)