13.爬虫训练场集成文件采集案例，来学习一下怎么实现的
本篇博客，我们在 爬虫训练场 项目中集成文件下载案例，便于大家学习文件采集。
文章分为三部分，分别是普通文件，MP4 文件，M3U8格式视频文件。
文章目录
- 普通文件
- MP4文件
- M3U8 文件
普通文件
在爬虫训练场集成普通文件时非常简单的，在 app 目录新建 file 文件夹，然后再新增 __init__.py 文件和 index.py 文件。
index.py 文件先声明蓝图对象。
from flask import Blueprint, request
from flask import render_templatef = 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>
视频地址从网络获取，来源不明确，在此感谢最初的提供者。
13.爬虫训练场集成文件采集案例，来学习一下怎么实现的相关推荐
- 10. 爬虫训练场，分页爬虫案例前端页面制作
本篇博客重点在分页逻辑与前端页面渲染实现,如果不是顺序阅读过来,可以先查看上一篇博客 <9. 爬虫训练场,分页爬虫案例设计 Demo,打通 Python Flask 和 MySQL> 文章 ...
- 第13章 Kotlin 集成 SpringBoot 服务端开发（1）
第13章 Kotlin 集成 SpringBoot 服务端开发 本章介绍Kotlin服务端开发的相关内容.首先,我们简单介绍一下Spring Boot服务端开发框架,快速给出一个 Restful He ...
- SpringBoot从入门到精通教程（三十一）- 爬虫框架集成
需求背景 SpringBoot用法:爬虫框架集成 业务场景 以抓取"今日头条"新闻举例说明 技术点 1. 集成爬虫框架webmagic(更多了解webmagic,可以去官方地址) ...
- 爬虫训练场项目，1小时掌握 Bootstrap 网格系统
文章目录 项目设计图概览 Bootstrap 串讲 Bootstrap5 安装使用 Bootstrap5 网格系统 项目设计图概览 爬虫训练场项目的基本呈现为方块布局,然后点击每个卡片可以进入待爬取目 ...
- 13.9 SpringBoot集成Swagger2中遇到的问题
13.9 SpringBoot集成Swagger2中遇到的问题 我们在使用SpringBoot集成Swagger2中,访问:http://127.0.0.1:8188/swagger-ui.html ...
- Python使用openpyxl和pandas处理学生成绩Excel文件实用案例
推荐图书: <Python程序设计(第3版)>,(ISBN:978-7-302-55083-9),清华大学出版社,2020年6月第1次印刷 京东.天猫.当当均已上架,可以选择自己常用平台搜 ...
- 【火车头采集教程】轻而易举学会火车头采集(附带采集案例)
咔咔不会用python,也没打算为了爬点东西就去学python.时间成本不允许我这样做 于是咔咔使用了一款工具,火车头采集工具 这款工具学会了很简单,不会的全是问题 下来咔咔会把这个工具的从开始到结束 ...
- SpringBoot集成文件 - 如何基于POI-tl和word模板导出庞大的Word文件？
前文我们介绍了通过Apache POI通过来导出word的例子:那如果是word模板方式,有没有开源库通过模板方式导出word呢?poi-tl是一个基于Apache POI的Word模板引擎,也是一个 ...
- 基于Rsyslog的日志文件采集办法
近几年笔者在生产环境中,很多日志处理场景中都适用了Rsyslog,在基于UDP的分布式日志汇聚.日志文件采集方面都有出色的发挥,"The rocket-fast system for log ...
- 火车头php post提取内容,【火车头采集教程】轻而易举学会火车头采集(附带采集案例)...
咔咔不会用python,也没打算为了爬点东西就去学python.时间成本不允许我这样做 于是咔咔使用了一款工具,火车头采集工具 这款工具学会了很简单,不会的全是问题 下来咔咔会把这个工具的从开始到结束 ...
最新文章
- makefile小技巧
- [转]图解APP的商业模式
- zip() python
- 怎样高效阅读一份深度学习项目代码？
- Python学习笔记：利用timeit计算函数调用耗时
- 微软发布企业安全进度报告 云应用安全服务即将面世
- uml边界类例子_UML中边界类、控制类和实体类
- 一级计算机考试电子表格排序筛选,重新应用Excel排序和筛选或清除筛选
- 2020年中国水利行业发展状况及未来发展趋势分析[图]
- python中用来返回序列的最大函数_Python内置函数____________用来返回序列中的最大元素。...
- 大数据零基础学习并不难，从0到1你需要的不仅仅是努力！
- 速速收藏——程序员接私活的七大平台
- C++ ：线程的暂停、恢复和停止
- IT30: IT人为什么那么有毅力
- 射频功率计介绍——一款超紧凑的多功能射频仪器
- 基于神经网络的专家系统,清华大学认知神经科学
- [BZOJ4084][Sdoi2015]bigyration hash
- 业余选手常见的技术缺陷及解决方法（下）
- 基于51单片机的LCD1602显示温湿度
- 判断是否已经安装vc2008运行时库
热门文章