Question

我正在尝试拍摄网页中所有表格元素的屏幕截图。现在，对于某些网页，它可以正常工作，我可以拍照。但是某些网站无法正常工作。我可以截取屏幕截图，但它们大多数是白色或灰色，这是iam使用的代码。

```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);

我尝试了不同的屏幕尺寸以及其他诸如等待所有内容加载的操作。当我在浏览器中看到时，我可以清楚地看到页面加载，并在页面加载后拍摄了屏幕截图，但是图像要么只是与屏幕区域相同大小的白屏。

注意：请注意，我也离线下载了某些页面，甚至无法正常工作。

Answer 1

我的问题是我在viewport之后设置了goto()，我将代码更改为此；

`const puppeteer = require('puppeteer');

async function run(url) {
    let browser = await puppeteer.launch({ headless: true });
    let page = await browser.newPage();
    const VIEWPORT = { width: 1360, height: 780}
    boxes2 = [];
    await page.setViewport(VIEWPORT);
    await page.goto(url, { waitUntil: 'domcontentloaded'});
    await page.waitFor('table');
    await page.waitForSelector('table');
    const el = await page.$$('table');
    for(let i = 0; i < el.length; i++){
        // await console.log(el[i].getBoundingClientRect());
        await el[i].screenshot({
            path: 'link_' +i+ '.png',
        })
    }
    // await processScreens(el, page);
    await page.close();
    await browser.close();
}

木偶乳白色或灰色屏幕截图

1 个答案: