n8n 案例 | 自动化网页抓取保存到飞书表格

最新推荐文章于 2025-05-14 11:46:11 发布

ken305

最新推荐文章于 2025-05-14 11:46:11 发布

阅读量743

点赞数 20

分类专栏： n8n 文章标签：飞书 ai 自动化

本文链接：https://blog.csdn.net/ken305/article/details/147849443

版权

n8n 专栏收录该内容

2 篇文章

订阅专栏

工作流介绍
自动抓取图书网书籍信息，写入多维表格。通过此工作流将学习到n8n网页抓取、飞书文档多维表格操作。
Node应用学习

HTTP Request
- Makes an http request and returns the reponse data
  发起一个 HTTP 请求并返回响应数据
HTML - Extract HTML Content (提取HTML内容）
Split Out - 切分内容
Sort
- Change items order ，排序
Edit fields（Set）
- Modify , add, or remove item fields
  修改、添加或删除项目字段
Feishu Node
- 飞书文档操作
- n8n飞书文档插件地址：https://github.com/other-blowsnow/n8n-nodes-feishu-lite
- n8n 飞书文档插件安装

工作流
触发器
Trigger manually
Runs the flow on clicking a button in n8n. Good forgetting started quickly
手动触发单击n8n中的按钮时运行流。好的遗忘开始得很快
HTTP Request

Method：GET
URL: 要获取网页的地址，本例：http://books.toscrape.com/

HTML - Extract HTML Content (提取HTML内容）

Operation - Extract HTML Content 提取HTML内容
Source data - JSON
Extraction Values 提取值
- Key：books
- CSS Selector: .row > li
  根据html内容设置。（需要html知识，对于像我这样的html小白而言，可以借助deepseek帮助理解。文末附上deepseek的解释）
  - Return value：HTML，返回格式HTML
  - Return array：TRUE，返回内容数组

Split Out - 拆分

Fields to Split Out
The name of the input fields to break out into separate items. Separate multiple field names by commas.
For binary data, use $bina ry . 要拆分为单独项的输入字段的名称。多个字段名称之间用逗号分隔。对于二进制数据，使用$ binary。
把books 拆分为单独项，通过运行查看，输出有20 items。

HTML - Extract HTML Content (提取HTML内容）
进一步提取书籍信息内容title标题，price价格。输出20组信息，
这里再次涉及HTML代码的解读。

Extraction Values - 解析两个值
Key
- title
CSS Selector
- h3 > a
Return Value
- Attribute
Attribute
- title
Key
- price
CSS Selector
- .price_color
Return Value
- Text

Sort by - 排序
按价格降序整理 items
Edit fields（set）
在多维表格中创建两个字段分别为书名，价格

设置变量关联，用于与多维表格字段关联。

Mode
Manual Mapping
Edit item fields one by one
手动映射
逐个编辑项目字段
Fields to Set
- 书名 = {{ $json.title }} # 上一个节点的title
- 价格 = {{ $json.price }} # 上一个节点的price
查看输出

Feishu Node - 飞书文档节点
要完成最后一步的飞书多维表格操作需要2个依赖

在n8n中安装飞书文档插件，地址：https://github.com/other-blowsnow/n8n-nodes-feishu-lite
申请飞书开放平台的的账号，Appid 、AppSecret，地址：https://open.feishu.cn/app?lang=zh-CN
后期整理响应的步骤文档。
Credential to connect with - 飞书账户/凭据
Feishu Credentials account
feishu凭据帐户
Resource
Operation
批量新增记录
多维表格Token - 详见"飞书开放平台 - 开发文档".
注意描述中多维表格URL的两种格式，刚开始使用时很容易忽略到这个点，导致操作失败。
暂时无法在飞书文档外展示此内容
多为表格 ID - - 详见"飞书开放平台 - 开发文档"
暂时无法在飞书文档外展示此内容
请求体JSON

{
  "records":[
  {
    "fields":
    {
      "文本":"{{ $json['书名'] }}",
      "价格":"{{ $json['价格'] }}"
    }
  }
]}

Test workflow - 测试工作流查看效果
每一个节点都成功执行

飞书多维表格查看效果，成功添加了20条记录。
HTML代码解释
5.1 提取页面内容
以下是deepseek的助解
我来帮你拆分和理解这个HTML代码段。这个页面是一个在线书店的产品列表页面，我会分块解释主要部分。
文档类型和HTML基础结构
代码段：

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

解释说明：

这是HTML5文档声明
条件注释用于针对不同版本的IE浏览器提供不同的HTML标签和类
设置了语言为英语(en-us)
no-js类用于JavaScript检测

头部(Head)部分
代码段：

<head>
    <title>All products | Books to Scrape - Sandbox</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="created" content="24th Jun 2016 09:29" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
    <meta name="robots" content="NOARCHIVE,NOCACHE" />
    <link rel="shortcut icon" href="static/oscar/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="static/oscar/css/styles.css" />
</head>

解释说明：

包含页面标题、元数据和外部资源链接
设置了字符编码、视口和搜索引擎指令
引入了网站的favicon和CSS样式表

页面头部(Header)
代码段：

<header class="header container-fluid">
    <div class="page_inner">
        <div class="row">
            <div class="col-sm-8 h1">
                <a href="index.html">Books to Scrape</a>
                <small> We love being scraped!</small>
            </div>
        </div>
    </div>
</header>

解释说明：

网站的顶部标题区域
使用了Bootstrap的网格系统(col-sm-8)
包含网站名称和标语

面包屑导航
代码段：

<ul class="breadcrumb">
    <li><a href="index.html">Home</a></li>
    <li class="active">All products</li>
</ul>

解释说明：

显示用户当前位置的导航路径
当前页面是"All products"，不可点击

侧边栏分类
代码段：

<div class="side_categories">
    <ul class="nav nav-list">
        <li>
            <a href="catalogue/category/books_1/index.html">Books</a>
            <ul>
                <li><a href="catalogue/category/books/travel_2/index.html">Travel</a></li>
                <li><a href="catalogue/category/books/mystery_3/index.html">Mystery</a></li>
                <!-- 更多分类... -->
            </ul>
        </li>
    </ul>
</div>

解释说明：

显示书籍分类的树形结构
主分类是"Books"，下面有多个子分类
每个分类都是可点击的链接

产品列表项(重复部分示例)
代码段：

<li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
    <article class="product_pod">
        <div class="image_container">
            <a href="catalogue/a-light-in-the-attic_1000/index.html">
                <img src="media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg" alt="A Light in the Attic" class="thumbnail">
            </a>
        </div>
        <p class="star-rating Three">
            <i class="icon-star"></i>
            <i class="icon-star"></i>
            <i class="icon-star"></i>
            <i class="icon-star"></i>
            <i class="icon-star"></i>
        </p>
        <h3><a href="catalogue/a-light-in-the-attic_1000/index.html" title="A Light in the Attic">A Light in the ...</a></h3>
        <div class="product_price">
            <p class="price_color">£51.77</p>
            <p class="instock availability">
                <i class="icon-ok"></i>In stock
            </p>
            <form>
                <button type="submit" class="btn btn-primary btn-block" data-loading-text="Adding...">Add to basket</button>
            </form>
        </div>
    </article>
</li>

关键变量/属性：

col-xs-6 col-sm-4 col-md-3 col-lg-3: 响应式网格类，控制不同屏幕尺寸下的列宽
star-rating Three: 表示3星评级(通过CSS显示相应数量的实心星)
price_color: 价格显示的样式类
data-loading-text: 按钮点击时显示的加载文本

分页控件
代码段：

<div>
    <ul class="pager">
        <li class="current">Page 1 of 50</li>
        <li class="next"><a href="catalogue/page-2.html">next</a></li>
    </ul>
</div>

解释说明：

显示当前页码和总页数
提供"下一页"的链接

页脚
代码段：

<footer class="footer container-fluid">
</footer>

解释说明：

简单的页脚区域，当前内容为空

JavaScript引用
代码段：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="static/oscar/js/bootstrap3/bootstrap.min.js"></script>
<script src="static/oscar/js/oscar/ui.js" type="text/javascript" charset="utf-8"></script>

解释说明：

引入jQuery库
引入Bootstrap的JavaScript文件
引入网站自定义的JavaScript文件
这个页面主要使用了Bootstrap框架构建，具有响应式设计，可以在不同设备上良好显示。产品列表是页面的核心内容，每个产品都有相同的结构但不同的内容(图片、标题、价格等)。
5.2 书籍产品容器段html代码助解
这是一个书籍产品的展示模块，我来帮你拆分理解这个代码段：

产品容器
代码段：

<article class="product_pod">

解释说明：

使用
标签表示一个独立的产品内容块
product_pod类用于整体样式控制

产品图片部分
代码段：

<div class="image_container">
    <a href="catalogue/a-light-in-the-attic_1000/index.html">
        <img src="media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg" 
             alt="A Light in the Attic" 
             class="thumbnail">
    </a>
</div>

关键变量/属性：

image_container: 图片容器的样式类
href: 链接到产品详情页
src: 产品图片路径(使用了缓存路径)
alt: 图片替代文本
thumbnail: 缩略图样式类

评分部分
代码段：

<p class="star-rating Three">
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
</p>

解释说明：

显示产品的星级评分
Three类表示3星评级(会通过CSS控制显示3个实心星和2个空心星)
每个

产品标题
代码段：

A Light in the ...

关键变量/属性： - title: 完整的书名(鼠标悬停时显示) - 显示时书名被截断显示为"A Light in the ..." - 点击标题可以进入产品详情页 5. 价格和库存信息代码段：

<div class="product_price">
    <p class="price_color">£51.77</p>
    <p class="instock availability">
        <i class="icon-ok"></i>
        In stock
    </p>
</div>

关键变量/属性：

price_color: 价格文本的样式类
instock availability: 库存状态的样式类
icon-ok: 库存可用图标

加入购物车按钮
代码段：

<form>
    <button type="submit" 
            class="btn btn-primary btn-block" 
            data-loading-text="Adding...">
        Add to basket
    </button>
</form>

解释说明：

简单的表单包含一个提交按钮
btn btn-primary btn-block: Bootstrap按钮样式类
data-loading-text: 点击按钮时显示的加载文本
这个产品模块的结构会在页面上重复出现，每个产品都有相同的HTML结构，但内容(图片、标题、价格等)会不同。这种重复的结构通常是通过服务器端模板或前端JavaScript动态生成的。