本网站可以出售:只需60000元直接拥有。QQ:939804642
您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 10:50:58
  ajax

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 resjavascript
下载地址:
ajax实现提交时校验表单方法
react axios 跨域访问一个或多个域名问题
51自学网自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1