易车销量排行榜页面是 https://car.yiche.com/newcar/salesrank/ ，由于易车 web 端没有提供一页展示多少条数据的功能，所以浏览这个排行榜时就得一页一页的翻，想查某一车型的销量数据很不方便。

但是易车手机app是可以一页展示的，而且也能搜索车型，不过碍于手机屏幕过小，我还是希望在 web 上查看，可以利用 Control + F 功能，更快速的寻找想要的数据。

  • 首页 https://car.yiche.com/newcar/salesrank/
  • 非首页 https://car.yiche.com/newcar/salesrank/?page=xxx

当前时间是 2024-07-10 13:47:01，默认展示的是上一个月的数据，也就是2024年6月份的销量排行榜。

如果想抓取2024年5月的数据，请求地址是

  • 首页 https://car.yiche.com/newcar/salesrank/?date=2024-05-01
  • 非首页 https://car.yiche.com/newcar/salesrank/?date=2024-05-01&page=xxx

其中 xxx 代表页码。

我抓取了 2024年6月的国内汽车销量数据，生成了一个静态页面。欢迎查阅：2024年6月国内汽车销量排行榜-按车型分

下面是源码

(async () => {
    const totalPages = 62; // 一共62页

    const fetchDataForPage = async (pageNum) => {
        let pageUrl = `https://car.yiche.com/newcar/salesrank/?page=${pageNum}`;
        const response = await fetch(pageUrl);
        const text = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(text, 'text/html');
        // 返回整个 div.rk-list-box 元素
        return doc.querySelector('div.rk-list-box');
    };

    // 定义睡眠函数
    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

    // 获取第一页的数据，并初始化页面
    let mainListBox = document.querySelector('div.rk-list-box');

    if (!mainListBox) {
        console.error('初始化时无法找到 div.rk-list-box 元素');
        return;
    }

    for (let i = 2; i <= totalPages; i++) {
        console.log(`正在抓取第 ${i} 页的数据...`);
        const pageListBox = await fetchDataForPage(i);

        if (pageListBox) {
            // 查找并更新所有懒加载图片
            const lazyImages = pageListBox.querySelectorAll('.rk-img.lazyload');
            lazyImages.forEach(img => {
                if (img.dataset.original) {
                    img.src = img.dataset['original'];
                }
            });
            // 将新页的数据追加到现有的列表中
            mainListBox.append(...pageListBox.children);
        } else {
            console.error(`第 ${i} 页的数据抓取失败`);
        }

        // 每抓取一页后等待15秒
        await sleep(15000); // 15秒
    }

    console.log('所有数据抓取完毕！');
})();

页面数据抓取完成之后，利用 chrome extension SingleFile 保存成一个 html 文件。

  • 源码地址 https://github.com/gildas-lormeau/SingleFile
  • Chrome Web Store 地址 https://chromewebstore.google.com/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle

Web Extension for saving a faithful copy of a complete web page in a single HTML file

然后我将这个htm文件托管到了自己的服务器上，尽管这个文件有 44MB，但是加载好之后通过 Control + F 查找车型和销量数据实在是太方便了。