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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

Vue前后端页面下载功能实现

效果图
后台下载服务实现
前台简单实现

效果图

首先看下演示效果。
点文档的话是 html 文档跳转的预览点下载的话是压缩包直接就进行下载了。
请添加图片描述
文档和压缩包就是我本地文件。
在这里插入图片描述

后台下载服务实现

后台这块我这里使用 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 服务报错问题处理
在这里插入图片描述
把 as_attachment 参数的值设置为 False 的话
图片、pdf 等类型的文件就可以支持预览了其它类型的文件还是直接进行下载。
为 True 的话全部类型都是直接下载。
浏览器地址栏输入链接就可以看效果。
这个是预览效果。
在这里插入图片描述
这个是直接下载效果。

前台简单实现

最简单的实现方法是用两个链接分别包含两个按钮即可。
如果想要做下载进度条的话可以考虑用 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>