Question

我很熟悉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)函数，但是我不确定如何通过一个.then()调用来链接该函数，该调用可以将返回的HTML访问到PDF。

谢谢！

Answer 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)

Answer 2

后来参加伪装舞会。但是，迟到总比不到好。到达此处的人应该测试该代码段是否有用。从以上答案中得出的代码：

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。

我希望所包含的评论会有所帮助

Google搜寻愉快！

Puppeteer JS从选择器生成PDF

2 个答案: