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

关键词：

【中文标题】有没有办法使用 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）

【讨论】：

使用 Puppeteer 时等待文本出现

】使用Puppeteer时等待文本出现【英文标题】：WaitfortexttoappearwhenusingPuppeteer【发布时间】：2018-03-3105:17:18【问题描述】：我想知道是否有与Selenium类似的方式来等待特定元素出现文本。我已经尝试过这样的事情，但它似乎并没有等... 查看详情

定位没有特定类名的元素

...同-Watirwebdriver;countingelementswithchangingclassnames。我能够根据使用类名asset-cardselectable添加特定数量的元素。目前，我希望单击更多元素以将它们添加到现 查看详情

有没有办法在铬启动选项中设置特定的显示？

】有没有办法在铬启动选项中设置特定的显示？【英文标题】：Isthereawaytosetanspecificdisplayatchromiumlaunchoptions?【发布时间】：2022-01-2020:22:41【问题描述】：我正在使用Puppeteer进行节点应用，我需要将Xvfb显示设置为浏览器的主显示... 查看详情

puppeteer的使用(代码片段)

 1、 2、 //puppeteer元素基本操作-输入文本与元素点击constpuppeteer=require(‘puppeteer‘)asyncfunctionfun()constbrowser=awaitpuppeteer.launch(headless:false,defaultViewport:width:1366,height:768)constpage=awaitbrowser.newPage()awaitpage.goto(‘https://www.baidu.com... 查看详情

有没有办法检查 MySQL 字典的元素是不是包含特定的整数？

】有没有办法检查MySQL字典的元素是不是包含特定的整数？【英文标题】：IsthereawaytocheckifaMySQLdictionary\'selementcontainsaspecificinteger?有没有办法检查MySQL字典的元素是否包含特定的整数？【发布时间】：2021-12-0419:39:36【问题描述】：... 查看详情

使用 puppeteer 在现场看不到元素 [关闭]

】使用puppeteer在现场看不到元素[关闭]【英文标题】：elementisnotvisibleonsiteusingpuppeteer[closed]【发布时间】：2021-01-1820:55:38【问题描述】：站点中存在一个聊天开始按钮，如下所示但在puppeteer上运行自动化脚本时，此按钮不显示。... 查看详情

如何使用seleniumwebdriver捕获特定元素而不是整个页面的屏幕截图？(代码片段)

...定元素。（例如，我希望用图像id=“Butterfly”捕获图片）有没有办法按选定的项目或元素捕获屏幕截图？答案我们可以通过裁剪整个页面截图来获取元素截图，如下所示：driver.get("http://www.google.co 查看详情

有没有办法在选择>选项中定位元素？

】有没有办法在选择>选项中定位元素？【英文标题】：Isthereawaytopositionelementsinselect>option?【发布时间】：2022-01-0518:21:06【问题描述】：我想定位2个P元素，这样它们看起来就像它们的父元素（选项）有justify-content:space-between... 查看详情

使用 jQuery 定位元素的特定子元素

】使用jQuery定位元素的特定子元素【英文标题】：TargetaSpecificChildofanElementUsingjQuery【发布时间】：2018-03-1701:44:55【问题描述】：当我尝试使用以下方法定位第二个孩子时：$(".well:nth-child(2)").addClass("animatedbounce");它针对的是所有孩... 查看详情

在 Mongodb 数组中，有没有办法在特定元素位置之前/之后插入新元素

】在Mongodb数组中，有没有办法在特定元素位置之前/之后插入新元素【英文标题】：InMongodbarrayisthereanywaytoinsertanewelementbefore/afteraspecificelementposition【发布时间】：2015-06-1410:05:07【问题描述】：假设我有一个类似的文档"_id":5,"rows":... 查看详情

在 Mongodb 数组中，有没有办法在特定元素位置之前/之后插入新元素

】在Mongodb数组中，有没有办法在特定元素位置之前/之后插入新元素【英文标题】：InMongodbarrayisthereanywaytoinsertanewelementbefore/afteraspecificelementposition【发布时间】：2015-06-1410:05:07【问题描述】：假设我有一个类似的文档"_id":5,"rows":... 查看详情

查看哪种样式的样式表应用于特定元素

...34【问题描述】：我在我的Qt应用程序中使用样式表(qss)。有没有办法查看将哪种样式应用于特定元素（小部件）？我可以使用试错法，但如果我能看到使用/应用了哪种样式会容易得多。styleSheet属性本身为空。那么有没有办法调... 查看详情

如何从标头中的cookie中获取特定元素

...ie标头中，但它看起来像这样。Hereismycookiefrommyrequestheaders有没有办法只从我 查看详情

有没有办法防止使用依赖项提供的特定功能？

】有没有办法防止使用依赖项提供的特定功能？【英文标题】：Isthereawaytopreventusageofaspecificfunctionprovidedbyadependency?【发布时间】：2020-09-1417:58:51【问题描述】：我的应用程序对库A有编译依赖项。我知道这个库中有一个特定的函... 查看详情

相对于情节提要中图像的特定点定位元素

...mageField的中间开始并填充所有内容直到屏幕底部。我正在使用xcode7和swift。【问题讨论】：【 查看详情

使用 deployJava.runApplet 定位特定元素

】使用deployJava.runApplet定位特定元素【英文标题】：UsingdeployJava.runApplettotargetspecificelement【发布时间】：2012-11-1103:38:57【问题描述】：经过多年成功维护一个使用旧的小程序：<scriptsrc="foo.js"></script>嵌入Java小程序的方法... 查看详情

使用伪元素定位特定 div

】使用伪元素定位特定div【英文标题】：Targetspecificdivwithpseudoelement【发布时间】：2018-03-0400:44:21【问题描述】：我正在尝试使用.counter-wrap类简单地定位我的html中的第三个div。在移动设备上，此div的margin-bottom为40像素。我想删除... 查看详情

有没有办法使用特定的 C 函数/符号作为 nm 的输出

】有没有办法使用特定的C函数/符号作为nm的输出【英文标题】：IsthereawaytouseaparticularCfunction/symbolasoutputbynm【发布时间】：2021-06-0708:37:16【问题描述】：我正在尝试分析已编译的文件以用于网络安全学习，并希望使用特定功能。... 查看详情