Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务

简介: Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务

效果图


首先看下演示效果。

点文档的话是 html 文档,跳转的预览,点下载的话是压缩包直接就进行下载了。

c800c5bdd2b140de8f44aa785504473d.gif

文档和压缩包就是我本地文件。

fa3e9449f11b423f85c7ef8d2ea4d897.png


后台下载服务实现


后台这块,我这里使用 python+flask 实现。

root 指定个下载目录,后面的路径会在这个基础上进行查找。

# -*- coding:utf-8 -*-
import flask
import socket
app = flask.Flask(__name__)
@app.route('/downloads/<path:path>', methods=['GET', 'POST'])
def downloads(path):
    '''
     根据指定路径提供下载服务
    '''
    # 指定可供下载的大目录
    root = "D:\downloads"
    # as_attachment参数设置为False,会展示预览,例如图片或pdf
    return flask.send_from_directory(root, path, as_attachment=False)
if __name__ == '__main__':
    # 获取ip地址
    s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
    s.connect(('8.8.8.8',80))
    host_ip = s.getsockname()[0]
    s.close()
    host_port = 5003
    app.run(host = host_ip, port = host_port)

启动后就可以看到服务地址了。

这里有个 utf-8 的报错,可以不用管,就是计算机名是中文导致的。

想了解的话可以看这篇文章:

计算机中文名导致的 flask、socket 服务报错问题处理

169eef061f6d4e5584585a0c4f30300f.png

把 as_attachment 参数的值设置为 False 的话,

图片、pdf 等类型的文件就可以支持预览了,其它类型的文件还是直接进行下载。

为 True 的话,全部类型都是直接下载。

浏览器地址栏输入链接就可以看效果。

这个是预览效果。

f11027cdf45347dca838f05d853a9407.png

这个是直接下载效果。

image.png


前台简单实现


最简单的实现方法是用两个链接分别包含两个按钮即可。

如果想要做下载进度条的话,可以考虑用 axios、ajax 实现。

<a href="http://xxx:5003/downloads/sonar.html" target="_blank">
  <mdb-btn color="primary">文档</mdb-btn>
</a>
<a href="http://xxx:5003/downloads/sonar.zip">
  <mdb-btn color="primary">下载</mdb-btn>
</a>

然后就能实现这个效果啦。

如果喜欢这个 UE 效果的可以看我的这篇文章:

移动端也能兼容的 web 页面制作1MDBootstrap 演示 Demo 运行演示

image.gif

喜欢的点个赞❤吧!

目录
相关文章
|
15天前
|
人工智能 Rust 开发者
【MCP教程系列】使用Python在阿里云百炼创建基于UVX的MCP服务完整指南
本文介绍如何使用基于uvx工具链的Python项目,结合阿里云百炼平台实现小红书文案审核助手的MCP服务开发与部署。首先通过安装uv工具初始化项目并配置虚拟环境,编写server.py文件调用qwen-plus模型完成内容审核功能。随后将项目打包上传至PyPI,供全球开发者访问。接着在阿里云百炼平台上配置并部署该MCP服务,解决可能的依赖问题。最后,在智能体应用中引入此MCP服务进行测试验证,确保其正常运行。
【MCP教程系列】使用Python在阿里云百炼创建基于UVX的MCP服务完整指南
|
21天前
|
SQL 安全 算法
解读 Python 3.14:模板字符串、惰性类型、Zstd压缩等7大核心功能升级
Python 3.14 引入了七大核心技术特性,大幅提升开发效率与应用安全性。其中包括:t-strings(PEP 750)提供更安全灵活的字符串处理;类型注解惰性求值(PEP 649)优化启动性能;外部调试器API标准化(PEP 768)增强调试体验;原生支持Zstandard压缩算法(PEP 784)提高效率;REPL交互环境升级更友好;UUID模块扩展支持新标准并优化性能;finally块语义强化(PEP 765)确保资源清理可靠性。这些改进使Python在后端开发、数据科学等领域更具竞争力。
51 5
解读 Python 3.14:模板字符串、惰性类型、Zstd压缩等7大核心功能升级
|
5月前
|
安全 前端开发 数据库
Python 语言结合 Flask 框架来实现一个基础的代购商品管理、用户下单等功能的简易系统
这是一个使用 Python 和 Flask 框架实现的简易代购系统示例,涵盖商品管理、用户注册登录、订单创建及查看等功能。通过 SQLAlchemy 进行数据库操作,支持添加商品、展示详情、库存管理等。用户可注册登录并下单,系统会检查库存并记录订单。此代码仅为参考,实际应用需进一步完善,如增强安全性、集成支付接口、优化界面等。
|
8天前
|
测试技术 Python
Python接口自动化测试中Mock服务的实施。
总结一下,Mock服务在接口自动化测试中的应用,可以让我们拥有更高的灵活度。而Python的 `unittest.mock`库为我们提供强大的支持。只要我们正确使用Mock服务,那么在任何情况下,无论是接口是否可用,都可以进行准确有效的测试。这样,就大大提高了自动化测试的稳定性和可靠性。
22 0
|
6月前
|
开发框架 数据建模 中间件
Python中的装饰器:简化代码,增强功能
在Python的世界里,装饰器是那些静悄悄的幕后英雄。它们不张扬,却能默默地为函数或类增添强大的功能。本文将带你了解装饰器的魅力所在,从基础概念到实际应用,我们一步步揭开装饰器的神秘面纱。准备好了吗?让我们开始这段简洁而富有启发性的旅程吧!
95 6
|
3月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
151 56
|
3月前
|
存储 算法 文件存储
探秘文件共享服务之哈希表助力 Python 算法实现
在数字化时代,文件共享服务不可或缺。哈希表(散列表)通过键值对存储数据,利用哈希函数将键映射到特定位置,极大提升文件上传、下载和搜索效率。例如,在大型文件共享平台中,文件名等信息作为键,物理地址作为值存入哈希表,用户检索时快速定位文件,减少遍历时间。此外,哈希表还用于文件一致性校验,确保传输文件未被篡改。以Python代码示例展示基于哈希表的文件索引实现,模拟文件共享服务的文件索引构建与检索功能。哈希表及其分布式变体如一致性哈希算法,保障文件均匀分布和负载均衡,持续优化文件共享服务性能。
|
4月前
|
人工智能 搜索推荐 测试技术
通义灵码 2.0 智能编码功能评测:Deepseek 加持下的 Python 开发体验
通义灵码 2.0 智能编码功能评测:Deepseek 加持下的 Python 开发体验
166 11
|
3月前
|
SQL 关系型数据库 数据库连接
|
5月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
832 8

推荐镜像

更多