javascript - puppeteer ，保存网页和图像

我正在尝试保存一个网页，以供Nodejs和puppeteer脱机使用。我看到很多例子:

await page.screenshot({path: 'example.png'});

但是，使用更大的网页不是一个选择。因此，在puppeteer中更好的选择是加载页面，然后像这样保存:

const html = await page.content();
// ... write to file

好的，那行得通。现在，我将像推特一样滚动页面。因此，我决定屏蔽 puppeteer 页面中的所有图像:

page.on('request', request => {
    if (request.resourceType() === 'image') {
        const imgUrl = request.url()
        download(imgUrl, 'download').then((output) => {
            images.push({url: output.url, filename: output.filename})
        }).catch((err) => {
            console.log(err)
        })
        request.abort()
    } else {
        request.continue()
    }
})

好的，我现在使用“npm download”库下载所有图像。是的，下载图像还可以:D。

现在，当我保存内容时，我想将其指向源中的脱机图像。

const html = await page.content();

但是现在我喜欢替换所有

<img src="/pic.png?id=123">
<img src="https://twitter.com/pics/1.png">

还有类似的东西:

<div style="background-image: url('this_also.gif')></div>

那么，有没有办法(在操纵p中)刮掉一个大页面并离线存储整个内容？

Javascript和CSS也很好

更新

现在，我将使用puppeteer再次打开大的html文件。

然后将所有文件拦截为:
https://dom.com/img/img.jpg，/file.jpg，...

request.respond({
    status: 200,
    contentType: 'image/jpeg',
    body: '..'
});

我也可以使用chrome扩展。但是我喜欢具有一些选项page.html()的功能，与page.pdf()相同

最佳答案

让我们回到第一个，您可以使用fullPage截取屏幕截图。

await page.screenshot({path: 'example.png', fullPage: true});

如果您确实希望将所有资源下载到脱机状态，则可以:

const fse = require('fs-extra');

page.on('response', (res) => {
    // save all the data to SOMEWHERE_TO_STORE
    await fse.outputFile(SOMEWHERE_TO_STORE, await res.buffer());
});

然后，您可以通过puppeteer离线浏览网站，一切正常。

await page.setRequestInterception(true);
page.on('request', (req) => {
    // handle the request by responding data that you stored in SOMEWHERE_TO_STORE
    // and of course, don't forget THE_FILE_TYPE
    req.respond({
        status: 200,
        contentType: THE_FILE_TYPE,
        body: await fse.readFile(SOMEWHERE_TO_STORE),
    });
});

关于javascript - puppeteer ，保存网页和图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53640405/