利用Nodejs如何抓取完整的html以及相关css、js、json、服务端响应的数据 等资源？

利用Nodejs如何抓取完整的html以及相关css、js、json、服务端响应的数据 等资源？

利用node.js可以抓取一个网址的完整资源吗，并把相关资源以相对路径或绝对路径保存在本地，把这个网址对应的静态资源抓取过来，css、js、json、服务器相应的请求的资源，如何做，大致思路是什么？ 有没有node第三方插件之类的，可以做这些功能？求大侠指点

5 回复

利用node.js可以抓取一个网址的完整资源吗，并把相关资源以相对路径或绝对路径保存在本地，把这个网址对应的静态资源抓取过来，css、js、json、服务器相应的请求的资源，如何做，大致思路是什么？ 有没有node第三方插件之类的，可以做这些功能？求大侠指点


使用 cheerio 解析html 然后找出所有的 css,js,img 队列下载 整理，可以参考一些网上的网站扒皮工具

当然可以。使用Node.js来抓取一个网页的完整资源（包括HTML、CSS、JS、JSON等）并将其保存到本地是一个常见的需求。我们可以使用一些流行的Node.js库来实现这个目标。以下是一个简单的示例，展示如何使用axios和cheerio来抓取网页的HTML内容，然后解析该HTML以找到所有的CSS、JS、JSON文件，并将它们下载到本地。

大致思路

  1. 使用axios发送HTTP请求获取网页的HTML。
  2. 使用cheerio解析HTML，提取所有CSS、JS、JSON文件的链接。
  3. 使用axios下载这些资源，并按需保存到本地目录。

示例代码

首先，确保你已经安装了所需的库：

npm install axios cheerio

然后，创建一个JavaScript文件（例如scraper.js），并添加以下代码：

const axios = require('axios');
const cheerio = require('cheerio');

// 目标URL
const url = 'https://example.com';

// 用于存储资源的本地目录
const saveDir = './resources/';

// 下载资源的函数
async function downloadResource(url, dest) {
    try {
        const response = await axios({
            method: 'GET',
            url,
            responseType: 'stream'
        });
        return new Promise((resolve, reject) => {
            response.data.pipe(require('fs').createWriteStream(dest))
                .on('finish', resolve)
                .on('error', reject);
        });
    } catch (error) {
        console.error(`Failed to download ${url}:`, error.message);
    }
}

// 主逻辑
async function scrape() {
    try {
        const response = await axios.get(url);
        const $ = cheerio.load(response.data);

        // 提取CSS、JS、JSON链接
        const resources = [];
        $('link[rel="stylesheet"]').each((i, el) => resources.push($(el).attr('href')));
        $('script[src]').each((i, el) => resources.push($(el).attr('src')));
        
        // 假设我们还从页面中获取了一些JSON数据
        const jsonData = JSON.parse($('script[type="application/json"]').text());
        resources.push(jsonData); // 将JSON数据保存为文件

        // 下载所有资源
        for (let resource of resources) {
            if (resource.startsWith('/')) { // 相对路径
                resource = new URL(resource, url).toString();
            }
            const fileName = resource.split('/').pop();
            await downloadResource(resource, `${saveDir}${fileName}`);
        }

        console.log('All resources have been downloaded.');
    } catch (error) {
        console.error('Error:', error.message);
    }
}

scrape();

解释

  • axios用于发送HTTP请求。
  • cheerio用于解析HTML。
  • downloadResource函数负责下载资源并保存到指定目录。
  • 在scrape函数中，我们首先获取HTML，然后解析它以找到所有的CSS和JS链接。我们假设JSON数据也是通过<script>标签嵌入的，因此我们也从中提取出来。
  • 最后，我们遍历所有找到的资源，并下载它们到本地目录。

这只是一个基本示例，实际应用中可能需要处理更多复杂的场景，比如处理相对路径、错误处理等。

[@skipify](/user/skipify) 多谢，我试试

要使用Node.js抓取一个网页的完整HTML及相关的CSS、JS、JSON等资源，并将其保存到本地，你可以使用一些第三方库来帮助完成这项任务。以下是一个简单的实现方案，结合了axios来下载HTML页面，以及cheerio来解析HTML并提取资源链接。

第三方库

  1. axios - 用于发送HTTP请求，获取网页内容。
  2. cheerio - 类似于jQuery的库，用于解析HTML文档，提取所需资源的URL。
  3. fs - Node.js内置模块，用于读写文件系统。
  4. path - Node.js内置模块，用于处理文件路径。

示例代码

首先安装所需的库：

npm install axios cheerio fs-extra path

接下来是抓取网页并保存其资源的示例代码：

const axios = require('axios');
const cheerio = require('cheerio');
const fs = require('fs-extra');
const path = require('path');

async function downloadPage(url, outputDir) {
    try {
        // 发送GET请求获取HTML页面
        const { data } = await axios.get(url);
        
        // 使用cheerio加载HTML
        const $ = cheerio.load(data);

        // 创建输出目录
        if (!fs.existsSync(outputDir)) {
            fs.mkdirSync(outputDir, { recursive: true });
        }

        // 保存HTML文件
        fs.writeFileSync(path.join(outputDir, 'index.html'), $.html());

        // 处理CSS资源
        $('link[rel="stylesheet"]').each((i, el) => {
            const href = $(el).attr('href');
            if (href && !href.startsWith('http')) {
                saveResource(url, href, outputDir);
            }
        });

        // 处理JS资源
        $('script[src]').each((i, el) => {
            const src = $(el).attr('src');
            if (src && !src.startsWith('http')) {
                saveResource(url, src, outputDir);
            }
        });

        // 其他资源（如图片、json等）
        // 这里可以根据需要添加更多的资源类型处理逻辑

    } catch (error) {
        console.error(`下载或解析网页时出错: ${error.message}`);
    }
}

function saveResource(baseUrl, resourceUrl, outputDir) {
    axios.get(resourceUrl, { responseType: 'stream' })
        .then(response => {
            const fileName = path.basename(resourceUrl);
            response.data.pipe(fs.createWriteStream(path.join(outputDir, fileName)));
        })
        .catch(error => {
            console.error(`无法下载资源: ${resourceUrl} - ${error.message}`);
        });
}

// 使用示例
downloadPage('https://example.com', './output');

解释

  1. 下载HTML：使用axios从指定URL获取HTML内容。
  2. 解析HTML：使用cheerio解析HTML，提取所有的CSS和JS文件链接。
  3. 保存资源：对于每个找到的CSS或JS文件链接，再次使用axios下载这些文件，并保存到指定目录中。
  4. 处理相对路径：确保下载的资源路径正确，即使原始资源使用的是相对路径。

这种方法虽然简单，但可能需要根据具体需求进行调整，特别是对于复杂的网站或动态生成的内容。

回到顶部