一个简单、快速、无需编程的可视化网页爬虫工具。基于 Next.js + Cheerio 构建，提供直观的图形界面来配置和执行网页数据抓取任务。
- 直观的图形界面 - 无需编写代码，通过简单的表单配置爬虫
- 智能页面分析 - 自动分析目标网页结构，推荐最佳选择器
- 实时预览 - 配置即时生效，实时查看抓取结果
- CSS选择器支持 - 使用标准CSS选择器定位元素
- 多属性提取 - 支持文本、HTML、链接、图片、自定义属性
- 批量提取 - 支持单元素和多元素批量提取
- JSON格式 - 结构化数据导出
- CSV格式 - 兼容Excel等表格软件
- 一键复制 - 快速复制到剪贴板
- 服务端渲染 - 基于 Next.js 的现代化架构
- 高性能解析 - 使用 Cheerio 进行快速HTML解析
- 响应式设计 - 完美适配桌面和移动设备
| 技术 | 用途 |
|---|---|
| Next.js 16 | 全栈React框架 |
| React 19 | UI组件库 |
| TypeScript | 类型安全 |
| Tailwind CSS | 样式框架 |
| Cheerio | HTML解析 |
| shadcn/ui | UI组件库 |
# 克隆仓库
git clone https://github.com/python-demon1234/visual-web-crawler.git
# 进入项目目录
cd visual-web-crawler
# 安装依赖
bun install
# 启动开发服务器
bun run dev打开 http://localhost:3000 访问应用。
在输入框中输入要抓取的网页地址，支持 HTTP/HTTPS 协议。
点击"分析页面"按钮，系统会自动：
- 识别页面标题和元信息
- 发现页面中的列表、卡片、表格等模式
- 推荐最佳CSS选择器
添加要提取的数据字段：
- 字段名称 - 为提取的数据命名
- CSS选择器 - 定位目标元素
- 提取属性 - 选择要提取的内容类型
- 多元素模式 - 是否提取所有匹配元素
点击"开始抓取"执行任务，查看抓取结果。
选择导出格式（JSON/CSV）或复制到剪贴板。
| 选择器 | 说明 |
|---|---|
h1 |
所有一级标题 |
.title |
class为title的元素 |
#main |
id为main的元素 |
a[href] |
带href属性的链接 |
div.card > h2 |
card容器内的h2标题 |
ul li |
列表中的所有项目 |
table tr td |
表格中的所有单元格 |
src/
├── app/
│ ├── api/
│ │ └── crawler/
│ │ ├── route.ts # 爬虫API
│ │ └── analyze/
│ │ └── route.ts # 页面分析API
│ ├── page.tsx # 主页面
│ ├── layout.tsx # 布局组件
│ └── globals.css # 全局样式
├── components/
│ └── ui/ # shadcn/ui组件
└── lib/
└── utils.ts # 工具函数
执行爬虫任务
请求体：
{
"url": "https://example.com",
"selectors": [
{
"name": "标题",
"selector": "h1",
"attribute": "text",
"multiple": false
}
]
}获取页面预览
参数：
url- 目标URL
分析页面结构
请求体：
{
"url": "https://example.com"
}本工具的设计灵感来源于以下优秀的开源项目：
- Scrapy - Python爬虫框架
- EasySpider - 可视化无代码爬虫
- Portia - Scrapy可视化工具
- Playwright - 浏览器自动化
本工具仅供学习和研究使用。使用本工具进行网页抓取时，请确保：
- 遵守目标网站的 robots.txt 规则
- 遵守相关法律法规
- 不对目标网站造成过大负担
- 尊重网站的服务条款
感谢所有开源社区的贡献者，让这个工具成为可能。
⭐ 如果这个项目对你有帮助，欢迎 Star 支持！