有没有办法使用 Puppeteer 定位特定元素并在将 html 转换为 pdf 时保留 CSS？

Posted 2023-02-19

【中文标题】有没有办法使用 Puppeteer 定位特定元素并在将 html 转换为 pdf 时保留 CSS？

【英文标题】：Is there a way to target a specific element using Puppeteer AND preserve the CSS when converting html to pdf?

【发布时间】：2021-01-22 17:58:42

【问题描述】：

我想将 一些 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',

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

【问题讨论】：

您找到答案了吗？我也有同样的要求！

【参考方案1】：

我已经取得了一些这样的成功：

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）