javascript puppeteer白色或灰色截图

vs91vp4v  于 2023-05-16  发布在  Java
关注(0)|答案(1)|浏览(152)

我正试图对网页中的所有表格元素进行截图。现在对于一些网页,它工作得非常好,我能够截图。但有些网站不工作。我能够采取截图,但他们大多是白色或灰色这里是我使用的代码。

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

我已经尝试了不同的屏幕尺寸和其他事情,如等待一切加载。当我在浏览器中看到时,我可以清楚地看到页面加载,加载后,屏幕截图被拍摄,但图像要么只是与表区域大小相同的白色屏幕。
注意:只是一个注意,我也下载了一些网页离线,甚至这是不工作。

hfyxw5xn

hfyxw5xn1#

我的问题是我在goto()之后设置了我的viewport,我把代码改成了这个;

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

相关问题