我正在尝试截取网页中所有表格元素的屏幕截图。对于一些网页来说,这个功能完美运行,我能够成功地截取屏幕截图。但是对于一些网站来说,这个功能不起作用。我能够截取屏幕截图,但是它们大多数都是白色或灰色的。以下是我使用的代码。
const puppeteer = require('puppeteer');
const jsonfile = require('jsonfile');
const getWebImages = async(pageToGo, link) => {
puppeteer.launch({
args: ['--start-maximized'],
headless: false,
defaultViewport: null
}).then(async (browser) => {
const page = await browser.newPage();
await page.goto(pageToGo, {waitUntil: 'networkidle2', timeout: 60000});
const VIEWPORT = {width: 1366, height: 768 }; // Your default values
boxes2 = [];
const getData = async (link) => {
return page.evaluate(async (link) => {
return await new Promise(resolve => {
var rects = [];
const element = document.querySelectorAll('table');
element.forEach(function (item, index) {
var box = item.getBoundingClientRect();
rects.push({
x: box.left,
y: box.left,
width: box.width,
height: box.height,
id: index
})
})
return resolve(rects);
})
}, link);
}
const getImages = async (rect) => {
for (const item of rect) {
try {
await page.screenshot({
path: 'data\\_table_' + item.id + '.png',
clip: {
x: item.x,
y: item.y,
width: item.width,
height: item.height
}
});
} catch (e) {
console.log(e)
}
}
}
boxes2 = await getData(link);
images = await getImages(boxes2);
console.log(boxes2)
await browser.close();
});
}
getWebImages("https://www.csb.gc.ca/rates/", 11);
我尝试了不同的屏幕尺寸和等待所有内容加载等其他方法。当我在浏览器中查看时,我可以清楚地看到页面加载完成后截图被拍摄,但是图片要么只是白色屏幕,大小与表格区域相同。
注意:我还下载了一些网页进行离线处理,但仍然无法正常工作。
page.goto(pageToGo, {waitUntil: 'networkidle2'});
。 - Waqar Haider