Puppeteer JS 从选择器生成 PDF答案

【问题标题】：Puppeteer JS generate PDF from selectorPuppeteer JS 从选择器生成 PDF
【发布时间】：2018-06-28 21:44:44
【问题描述】：

我正在熟悉 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);

我确实看到有一个 page.$(selector) 函数，但我不确定如何将它与可以访问返回的 HTML 到 PDF 的 .then() 调用链接起来。

谢谢！

【问题讨论】：

标签： javascript vue.js pdf-generation puppeteer html2pdf

【解决方案1】：

试试这个代码。 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)

【讨论】：

感谢@aofdev！有没有办法保留已应用于页面的 CSS？拨打setContent 时，它似乎丢失了。
我刚刚发现了page.addStyleTag 函数，这似乎有效。现在我只需要弄清楚如何动态循环页面上的link[rel=stylesheet]标签...
谢谢@aofdev 这对我很有帮助，解决方案有效。
这行得通，但唯一的问题是它不会保存 pdf 中内容的 css 样式..

【解决方案2】：

木偶派对迟到了。然而，迟到总比没有好。到达这里的人应该测试一下这个 sn-p 是否有用。从以上答案得出的代码：

const puppeteer = require('puppeteer');

(async () => {
   const browser = await puppeteer.launch() //defaults to true 
   const page = await browser.newPage()

 // Create PDF from your URL => replace my fictitious url with your own url for this to work! 
 await page.goto('https://932db2cf7b.ngrok.io/chapter/lesson.php', {waitUntil: 'networkidle2'})

const items = await page.$eval('#doto', (element) => {
return element.innerHTML 
}) // Get DOM HTML elements

  await page.setContent(items) 

 await page.pdf({ path: 'pdf/aip.pdf', format: 'A4' })

 await browser.close()
 })()

这是将 div 中的元素转换为 pdf => aip 在名为 pdf 的文件夹中。

我希望包含的 cmets 会有所帮助

谷歌搜索愉快！

【讨论】：