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>
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文件流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)
第一种:传统的ajax异步请求,后台代码以及效果在最下边 首先我们在eclipse中创建一个注册页面regist.jsp,创建一个form表单,注意,由于我们只是实现用户名校验的效果,下边红色部门是我们需要研究对象,所以其他的部门可以忽略不看. 内容如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <
-
使用ajax的post同步执行(实现方法)
一般我们使用的ajax请求时,都是异步的在结果运行以后,在方法外是得不到参数的,但是使用同步执行的时候是可以返回data的. ajaxSettings.async参数进行设置,默强调内容认情况下是true,即异步,同步时在方法前设置: $.ajaxSettings.async = false;此时在方法执行完,能return出相应的data. 代码块 /** * 得到列表 */ function flowAtoms(){ //请求接口 var listUrl = getServerUrl('XX
-
通过Ajax进行Post提交Json数据的方法
js代码 $.ajax({ type : "POST", url : js_path + "/maintainAdd/add", data : JSON.stringify(madd_data.editMaintain), contentType : "application/json", dataType : "json", complete:function(msg) { layer.msg("报修成功"
-
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
实现目的 使用D3.js开发的前端应用,用户与图交互更改图的内容后,如何在下一次加载的显示上一次最后交互的内容? 本文提供通过后端的Node.js程序提供一种最小化方案,作为参考. 开发环境 后端:Node.js Node.js模块:Express.body-parser.fs 前端:JQuery 后端 1.安装nodejs,装好后用显示版本号确认是否安装好 node --version 2.新建一工程目录(文件夹),安装模块. npm install express npm install b
-
关于jQuery.ajax()的jsonp碰上post详解
前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与jsonp 跨域:由于受到同源策略(协议.域名.端口三者必须全部相同)的影响,ajax请求会受到限制,要突破这种限制,跨域便产生了.跨域的解决方案有多种,这里不展开阐述,只是针对GET请求中的jsonp跨域解决方案做一下说明. jsonp,本质上jsonp不是xhr异步请求,就是请求了一个js文件,
-
ajax使用formdata上传文件流
今天在做项目的时候涉及到了ajax上传文件流的问题,由于是移动端两个页面的两个表单使用同一个ajax地址进行上传数据给后台,数据中涉及到了不同类型的input,其中存在了file类型的input,导致无法使用表单序列化直接传输数据. 只存在传递一般的参数时,可以使用$("#表单id").serialize()对form表单序列化,从而将form表单中的所有参数传递到服务端.而上传文件的文件流时无法被序列化并传递的,因此使用了FormData的对象进行文件上传.具体formdata的使用
-
Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法
本文实例讲述了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法.分享给大家供大家参考,具体如下: HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中.通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式)
-
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对象写
-
java 文件流的处理方式 文件打包成zip
目录 java 文件流的处理 文件打包成zip 1.下载文件到本地 2.java后端下载 3.文件打包成zip 后台多文件打包成zip返回流 前台提供按钮一键下载 java 文件流的处理 文件打包成zip 1.下载文件到本地 public void download(HttpServletResponse response){ String filePath ="";//文件路径 String fileName ="";//文件名称 // 读到流中 InputStr
-
Ajax请求二进制流进行处理（ajax异步下载文件）的简单方法
摘要: ajax请求一个二进制流(文件),转换为Blob进行处理或者下载保存文件 需求 管理后台需要随时下载数据报表,数据要实时生成后转换为excel下载. 文件不大,页面放置"导出"按钮,点击按钮后弹出保存文件对话框保存 说明:第一种方法使用a标签直接可以满足大部分人需求,第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看 解决方案 方法一 请求文件的接口能改为GET则可以使用这种方
-
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati
-
如何利用python web框架做文件流下载的实现示例
hello 大家好, 前不久公司里有个需求,把时序数据库中的日志下载到本地. 大家都知道. 数据库里的数据 都是存在数据库里的(废话). 想把他下载到客户的本地. 有的同学第一反应是: 只有文件才能下载. 所以大多数同学会想到先把数据从数据库中读出来,然后写入到服务器中的某个文件夹下生成文件, 然后再下载. 其实这是非常不效率的方法, 最简单的方法是,我们从数据库中读取到文件后, 直接以流的形式让用户去下载. 这里我拿python flask框架来做例子,其实非常简单,步骤一共有3个 1: 取出
-
React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(HttpServletResponse response, String fileName, String sheetName, List<String> titleRow, List<List<String>> dataRows) { OutputStream out = nu
-
response文件流输出文件名中文不显示的解决
目录 文件流输出文件名中文不显示 使用如下方法没有解决 解决方法 response下载时中文文件名乱码 文件流输出文件名中文不显示 response返回文件流 用response.setHeader(“Content-disposition”, “attachment; filename=”+fileName);结果中文名称以“—”下滑下显示. 使用如下方法没有解决 response.setCharacterEncoding("UTF-8"); response.setContentT
-
vue导出excel文件流中文乱码问题及解决
目录 导出excel文件流中文乱码 导出excel乱码(锟斤拷唷?锟?:锟斤拷) 导出excel文件流中文乱码 解决此方法很多网上的差不多都可以.一下提供简单的方法 loads(){ let data={ userWord:this.dataList.userWord, examId:this.$route.query.id, exportType:this.active, } api.exportUserResult(data).then((res) => { const blob = new
-
php中强制下载文件的代码（解决了IE下中文文件名乱码问题）
中间遇到一个问题是提交的中文文件名直接放到header里在IE下会变成乱码,解决方法是将文件名先urlencode一下再放入header,如下. 复制代码 代码如下: <?php $file_name = urlencode($_REQUEST['filename']); header("Pragma: public"); header("Expires: 0"); header("Cache-Control: must-revalidate, po
-
Java用文件流下载网络文件示例代码
复制代码 代码如下: public HttpServletResponse download(String path, HttpServletResponse response) { try { // path是指欲下载的文件的路径. File file = new File(path); // 取得文件名. String filename = file.getName();