ajax post下载flask文件流以及中文文件名问题(ajax async默认值)快来看

随心笔谈2个月前发布 admin
194 00
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买

文章摘要

这篇文章介绍了如何在 Flask 应用程序中通过 `send_file` 方法实现文件下载功能,并通过 JavaScript 的异步 `fetch` 方法展示下载链接。文章分为两部分:第一部分使用 Python 和 Flask 编写 `download_file` 函数,通过 `quote` 方法处理文件名并使用 `make_response` 生成下载响应;第二部分使用 JavaScript 的异步操作实现文件下载功能,包括处理响应数据、创建下载链接以及展示下载内容。文章核心内容在于如何将 Flask 中的文件下载功能与浏览器端的 JavaScript 实现结合,支持即时下载功能。


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=https://www.jb51.net/article/urlObjData
link.download=fileName //下载文件的名字
document.body.appendChild(link)
link.click()

document.body.removeChild(link)
window.URL.revokeObjectURL(urlObjData);

//展示图片
//xxx.src=https://www.jb51.net/article/urlObjData
}
}

© 版权声明

相关文章