更新时间：2020年04月02日 10:24:43 作者：levinit
这篇文章主要介绍了ajax post下载flask文件流以及中文文件名问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
ajax post下载文件
后端返回文件流，flask中可使用
return send_file
(文件路径) 返回二进制文件流，在headers中传送文件相关信息（如文件名）。
前端使用
URL.createObjectURL()
创建创建一个
DOMString URL
对象，创建一个 a 节点，将URL对象赋给a节点的 href 属性，最后调用 click() 方法点击该 a 节点即可弹出浏览器下载框。
方法同上，将 a 改成 img ， href 改成 src 即可，将URL对象写入到目标img标签的src即可。
另一种方法是后端返回图片转base64的字符串，src的值形如
"data:image/svg+xml;base64,${base字符串}"
。（这里的 svg+xml 表示图片格式是svg，如果是png则改成png）
中文文件名乱码
http headers中直接传输中文文件名，比较简单的方法是后端进行url转码（这里使用python的 urllib.parse.quote ），前端使用
decodeURI()
解码。
此外还可以设置headers的
Content-Disposition: attachment; filename*=UTF-8''xxxxx
，不过兼容性嘛……麻烦还不如直接urlcode算了，而且也懒得设置 Content-Disposition 了，前端从
Content-Disposition
中取 filename 也是够麻烦的，会取到一长串字符串然后自己再想办法取出来 filename= 后面的信息。
代码如下：
flask
from urllib.parse import quote
@file.route('/download', methods=["POST"])
def download_file():
filename='xx' #文件名
filepath='xx/xx' #文件路径
res = make_response(send_file(filepath))
#自定义的一个header，方便前端取到名字
res.headers['filename'] = quote(filename.encode('utf-8'))
return res
javascript——以async异步fetch为例：
async function download() {
const res = await fetch(`http://xxx/file/download`, {
method: "POST",
body: JSON.stringify({}), //body里面是要发送的数据
headers: { "Content-Type": "application/json" },
responseType: 'blob'
if (res.ok) {
const blData = await res.blob() //拿到blob数据
const urlObjData = window.URL.createObjectURL(new Blob([blData])) //创建url对象
//获取文件 进行下转码
const fileName = decodeURI(fileNameres.headers.get('filename'))
//创建a标签 点击a标签 达到下载目的
const link = document.createElement('a')
link.href = urlObjData
link.download = fileName //下载文件的名字
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(urlObjData);
//展示图片
//xxx.src=urlObjData
ps：flask下载文件---文件流
html:
<a name="downloadbtn" class="btn btn-success pull-right" href="/downloadfile/?filename=/root/allfile/123.txt">下载</a>
@app.route('/downloadfile/', methods=['GET', 'POST'])
def downloadfile():
if request.method == 'GET':
fullfilename = request.args.get('filename')
# fullfilename = '/root/allfile/123.txt'
fullfilenamelist = fullfilename.split('/')
filename = fullfilenamelist[-1]
filepath = fullfilename.replace('/%s'%filename, '')
#普通下载
# response = make_response(send_from_directory(filepath, filename, as_attachment=True))
# response.headers["Content-Disposition"] = "attachment; filename={}".format(filepath.encode().decode('latin-1'))
#return send_from_directory(filepath, filename, as_attachment=True)
#流式读取
def send_file():
store_path = fullfilename
with open(store_path, 'rb') as targetfile:
while 1:
data = targetfile.read(20 * 1024 * 1024) # 每次读取20M
if not data:
break
yield data
response = Response(send_file(), content_type='application/octet-stream')
response.headers["Content-disposition"] = 'attachment; filename=%s' % filename # 如果不加上这行代码，导致下图的问题
return response
没有文件名，和文件格式，遇到这种情况，打开F12，查看response.headers 与正常的比较
到此这篇关于ajax post下载flask文件流以及中文文件名的文章就介绍到这了,更多相关ajax post下载flask文件流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
-
-
-
-
-
Ajax验证用户的唯一性
这篇文章主要介绍了Ajax验证用户的唯一性，验证环境Ajax+Jquery+Json+struts2，感兴趣的小伙伴们可以参考一下
2016-05-05
-
原生AJAX写法实例分析
这篇文章主要介绍了原生AJAX写法实例分析,以一个完整的原生Ajax实例分析了Ajax的实现技巧,有助于加深对Ajax的理解,需要的朋友可以参考下
2015-02-02
-
-
-
-
iframe式ajax调用示例
想必大家对ajax调用有所熟悉，下面为大家介绍下iframe式ajax调用,需要的朋友可以参考下
2014-02-02
-
如何封装一个Ajax函数
这篇文章主要介绍了如何封装一个Ajax函数，帮助大家更好的理解和学习网络编程，感兴趣的朋友可以了解下
2021-05-05
