13.爬虫训练场集成文件采集案例，来学习一下怎么实现的
本篇博客，我们在 爬虫训练场 项目中集成文件下载案例，便于大家学习文件采集。
文章分为三部分，分别是普通文件，MP4 文件，M3U8格式视频文件。
普通文件
在爬虫训练场集成普通文件时非常简单的，在 app 目录新建 file 文件夹，然后再新增 __init__.py 文件和 index.py 文件。
index.py 文件先声明蓝图对象。
from flask import Blueprint, request
from flask import render_template
f = Blueprint('file', __name__, url_prefix='/file')
于此同时还需要在 templates 目录中建立 file 文件夹，然后增加视图文件，例如 c.html 代码如下所示。
{% extends "base.html" %}
{% block content %}
{% include 'common/nav.html'%}
<div class="container">
<h4>普通文件</h4>
</div>
{% include 'common/footer.html'%}
{% endblock %}
接下来就可以启动项目了，被忘记在 app/__init__.py 中注册蓝图。
from .file.index import *
app.register_blueprint(f)
下面在 Bootstrap5 中实现文件下载，Bootstrap 5 中的文件下载可以使用 HTML 的 a 标签来实现。你需要指定 a 标签的 href 属性为文件的 URL 地址，并且设置 download 属性来指定文件下载时使用的文件名。
例如，要在 Bootstrap 5 中实现一个文件下载链接，你可以使用以下代码：
<a href="/path/to/file.pdf" download="file.pdf">下载文件</a>
这样，当用户点击 “下载文件” 链接时，浏览器会弹出文件下载对话框，允许用户选择文件保存的位置。
为了便于下载，我们从互联网寻找一个免费的资源文件，下述代码新增四种类型文件，分别是 Word，Excel，PPT，PDF。
{% extends "base.html" %}
{% block content %}
{% include 'common/nav.html'%}
<div class="container text-center mt-3" style="min-height:600px;">
<h3>爬虫采集文件练习</h3>
<div class="d-grid mt-2">
<a class="btn btn-primary"
href="https://maths.whu.edu.cn/__local/1/12/4A/86AB997BEBDB836B166DC23CDAB_47C87642_1F200.doc"
download="file.doc">WORD 文档：点击下载文件</a>
<a class="btn btn-success mt-2"
href="https://www.pipechina.com.cn/img/web/f756436145e73afced434d0838191374.xls"
download="file.xls">Excel 文档：点击下载文件</a>
<a class="btn btn-warning mt-2"
href="https://ndac.env.tsinghua.edu.cn/app/data/6.1poster_16th.pptx"
download="file.ppt">PPT 文档：点击下载文件</a>
<a class="btn btn-danger mt-2"
href="https://admission.ucas.ac.cn/Content/Upload/2021/6/%E5%9C%B0%E7%90%86%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F.pdf"
download="file.pdf">PDF 文档：点击下载文件</a>
</div>
</div>
{% include 'common/footer.html'%}
{% endblock %}
除此之外，还可以给页面增加一些图标，丰富页面样式。
要在 Bootstrap 5 中添加图标，您可以使用 <i> 标签并使用带有 .bi 类的字体图标库。
例如，要添加一个电话图标，可以使用以下代码：
请注意，需要在页面中引入 Bootstrap 字体图标库的 CSS 文件，如下所示：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
为了让样式表更容易加载到页面中，我们需要重新调整 flask 模板结构，这里建议大家去 gitcode 查看源码，要修改的文件较多，最核心的是修改了 base.html 文件，代码如下。
<!DOCTYPE html>
<html>
{% block head %}
<head>
{% include 'common/header.html'%}
{% block link %}{% endblock link %}
{% include 'common/tj.html'%}
</head>
{% endblock %}
<body>
{% include 'common/nav.html'%}
{% block content %} {% endblock content %}
{% include 'common/footer.html' %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
继续修改 termplates/file/c.html 文件，添加图标，示例如下所示。
<i class="bi bi-file-word"></i>
<i class="bi bi-file-earmark-excel"></i>
<i class="bi bi-file-ppt"></i>
<i class="bi bi-file-earmark-pdf"></i>
运行代码，得到普通文件的下载页面。
MP4文件
下面实现 MP4 文件在线预览，先从互联网寻找到免费无版权的视频文件。
在 app/templates/file/mp4.html，然后继承相关模板文件。
{% extends "base.html" %}
{% block content %}
{% endblock %}
要在 Bootstrap 5 中实现视频播放，你需要使用 HTML5 的 <video> 标签。
首先，在你的 HTML 文件中插入 <video> 标签，并指定视频的 URL：
<video src="myvideo.mp4" controls></video>
其中，controls 属性会在视频上显示控制按钮，如播放/暂停、音量调节等。
你也可以设置视频的宽度和高度，以及是否自动播放：
<video src="myvideo.mp4" controls width="640" height="360" autoplay></video>
你还可以使用 Bootstrap 的网格系统来调整视频的大小和位置。例如，要将视频居中显示，可以使用类似于这样的 HTML 代码：
<div class="container">
<div class="row">
<div class="col-12">
<video src="myvideo.mp4" controls class="mx-auto"></video>
</div>
</div>
</div>
这样，视频就会居中显示在页面中。
最后，你可能需要支持不同的视频格式，这样用户的浏览器就可以正常播放你的视频。为了达到这个目的，你可以使用多个 <source> 标签来指定不同的视频文件：
<video controls>
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.webm" type="video/webm">
</video>
在 file/index.py 添加控制器函数，具体如下。
@f.route('/mp4')
def mp4_file():
mp4_url = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
return render_template('file/mp4.html', file=mp4_url)
此时可以在前端页面，即 mp4.html 中调用视频地址，渲染视频。
{% block content %}
<div class="container text-center mt-3">
<div class="row">
<div class="col-12">
<video src="{{file}}" controls class="mx-auto"></video>
</div>
</div>
</div>
{% endblock %}
得到的界面如下所示。
我们可以在此基础上使用 .d-block 和 .w-100 类，二者将视频元素添加到页面上，并让它占满整个屏幕，如下所示：
<video class="d-block w-100" src="{{file}}" controls></video>
你也可以使用 .embed-responsive 类来调整视频的宽高比，如下所示：
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" src="{{file}}" controls></video>
</div>
在这里，.embed-responsive-16by9 类定义了视频的宽高比为 16:9。你也可以使用其他的宽高比，例如 4:3 或 1:1。
另外，你还可以使用 Bootstrap 5 的其他类来调整视频的样式，例如边框颜色、圆角、阴影等。
M3U8 文件
在 Web 端播放 M3U8 文件需要使用 hls.js 文件，然后判断浏览器是否支持 HLS，支持的话用 new HLS() 建立播放器对象，指定播放源即可实现。
新建 file/m3u8.html，然后添加如下代码。
<div class="container text-center">
<video id="video" controls loop="false" width="100%"></video>
</div>
<script type="text/javascript">
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8');
hls.attachMedia(video);
}
</script>
视频地址从网络获取，来源不明确，在此感谢最初的提供者。
📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 810 篇原创博客
- 点赞
- 收藏
- 关注作者
评论（0）