ajax post下载flask文件流以及中文文件名问题

这篇文章主要介绍了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:

下载

py:

@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文件流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/article/184005.htm

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/897265.html

(0)
上一篇 2025年1月4日 00:55:46
下一篇 2025年1月4日 00:56:19

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Ajax工作原理及优缺点实例解析

    这篇文章主要介绍了Ajax工作原理及优缺点实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.Ajax是什么? 全称是 asynchronous javascript and xm…

    2025年1月4日
    100
  • ajax实现excel报表导出

    利用ajax实现excel报表导出【解决乱码问题】,供大家参考,具体内容如下 背景 项目中遇到一个场景,要导出一个excel报表。由于需要token验证,所以不能用a标签;由于页面复杂,所以不能使用表单提交。初步考虑前端使用ajax,后端返…

    编程技术 2025年1月4日
    100
  • ajax实现简单登录页面

    这篇文章主要为大家详细介绍了ajax实现简单登录页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下 一.什么是ajax Aja…

    编程技术 2025年1月4日
    100
  • AJAX实现数据的增删改查操作详解java后台

    这篇文章主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下 本文实例讲述了AJAX实现数据的增删改查操作。分享给大家供大家参考,具体如下: 主页:in…

    2025年1月4日
    100
  • ajax异步实现文件分片上传实例代码

    这篇文章主要给大家介绍了关于ajax异步实现文件分片上传的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 前言 使用Ajax上传文件的应用场景颇多,比如上传用户…

    编程技术 2025年1月4日
    200
  • Ajax实现登录案例

    这篇文章主要为大家详细介绍了Ajax实现登录案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 Ajax登录案例,供大家参考,具体内容如下 Msg package com.lbl.msg; public cl…

    2025年1月4日
    200
  • Ajax实现文件上传功能(Spring MVC)

    这篇文章主要为大家详细介绍了Ajax实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下 前端表单 和 JQuery j…

    2025年1月4日
    200
  • 使用ajax跨域调用springboot框架的api传输文件

    这篇文章主要介绍了使用ajax跨域调用springboot框架的api传输文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在新项目中使用的是springboot编写的api,涉及到ajax跨域请求和传输文…

    编程技术 2025年1月4日
    200
  • bootstrapselect2动态从后台Ajax动态获取数据的代码

    这篇文章主要介绍了bootstrap select2 动态从后台Ajax动态获取数据的代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 效果图展示: 实现方式: 前端代码: 动态多选 <sele…

    2025年1月4日
    200
  • Ajax实现二级联动菜单

    这篇文章主要为大家详细介绍了Ajax实现二级联动菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp 二级菜单联…

    编程技术 2025年1月4日
    200

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信