在将html转换为pdf时，是否可以使用Puppeteer定位特定元素并保留CSS？

问题描述

我想将一些 html转换为pdf文件。问题是我只需要网页的一部分，当然也不需要全部元素。因此，我想知道是否有一种方法可以将单个元素与特定的id例如定位，以便仅将该元素转换为pdf？

我知道我可以做到这一点，例如：

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

但是，使用上面的代码不会保留CSS ...

使用page.addStyleTag手动添加css也不是一种选择，因为我要转换为pdf的元素已经施加了很多CSS样式... >

所以问题仍然存在，如何使用Puppeteer转换页面上的单个元素（或者，如果您知道其他方式/方法/库，那么当然也欢迎使用这些方式）。

例如，

Grabzit允许您在其选项中指定targetElement，如下所示：

const options = {
   'targetElement': '#rightContent','pagesize': 'A4',}

不幸的是，它没有给我一致的结果。

解决方法

我已经取得了一些成功：

const myElement = await page.$('.my-el');
await page.evaluate(el => {
  el = el.cloneNode(true);

  document.body.innerHTML = `
    <div>
      ${el.outerHTML}
    </div>
  `;
},myElement);
const pdf = await page.pdf(...)

但是，当我选择的元素包含Canvas元素时，效果不是很好。

（代码基于此处的示例https://github.com/puppeteer/examples/blob/master/element-to-pdf.js）

google-chrome-headless headless javascript