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

喜欢的点个赞❤吧!

目录
相关文章
|
7天前
|
JavaScript
vue 改变数据后,数据变化页面不刷新
vue 改变数据后,数据变化页面不刷新
14 0
|
7天前
|
JavaScript
Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
# 1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。 # 2、实现 ## 1)列表页 index.vue ```html <el-table> <!-- 其他列 --> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope
44 0
|
22天前
|
JavaScript 前端开发
Vue系列教程(21)- 自定义404页面&路由模式
Vue系列教程(21)- 自定义404页面&路由模式
14 1
|
25天前
|
JavaScript
Vue项目新建一个路由页面
Vue项目新建一个路由页面
10 0
|
25天前
|
JSON JavaScript 数据格式
Vue移动端框架Mint UI教程-数据渲染到页面(六)
Vue移动端框架Mint UI教程-数据渲染到页面(六)
12 0
|
1月前
|
JavaScript
vue使用iframe 子页面调用父页面的方法
vue使用iframe 子页面调用父页面的方法
|
1月前
|
JavaScript
vue中页面的跳转
vue中页面的跳转
15 0
|
1月前
|
JavaScript 前端开发 UED
(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况
(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况
51 0
|
1月前
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
30 1
|
1月前
|
前端开发
element-ui+vue上传图片和评论现成完整html页面
element-ui+vue上传图片和评论现成完整html页面
18 1
相关产品
云迁移中心
推荐文章
更多