如何使用 Puppeteer 截取表格的屏幕截图? [英] How can I take a screenshot of a table using Puppeteer?

问题描述

我正在尝试使用 Puppeteer 来截取商品和股票价格，网址是 这个.我想截图的类是 .trigo 一个，但我想删除 .abas 之前.我可以让它工作的唯一方法是这样做:

I'm trying to use Puppeteer to take screenshot of commodities and stock prices, the website is this one. The class I wanna take a screenshot is the .trigo one, but I wanna remove the .abas before. The only way that I could make it works was doing like this:

await page.goto('https://www.canalrural.com.br/cotacao/soja/', {waitUntil: 'networkidle2'});
await page.setViewport({width: 800, height: 1640});
await page.$eval('div.trigo > div > div:nth-child(3) > h3', (el) => el.scrollIntoView());
await page.screenshot({
    path: folder + '02 - soja.jpg',
    type: 'jpeg',
    quality: 70
});

但即使每次检查时视口的高度都会发生变化(因为他们在表格中输入了新信息)...获得 .trigo 类内容的最佳方法是什么，删除.abas 类并截取屏幕截图?谢谢各位.

But even the height of the Viewport change every time I check it (because they input new information in the tables)... What is the best way to get the .trigo class content, remove the .abas class and take the screenshot? Thank you guys.

推荐答案

您可以使用 evaluate 表达式删除元素.

You can remove the element using an evaluate expression.

await page.evaluate(() => document.getElementById("abas").remove());

然后您可以获取元素 .trigo 并在该元素上调用 screenshot.

And then you can get the element .trigo and call screenshot on that element.

var el = await page.$('.trigo');
await el.screenshot({
    path: folder + '02 - soja.jpg',
    type: 'jpeg',
    quality: 70
});

这篇关于如何使用 Puppeteer 截取表格的屏幕截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！