前端下载文件从 headers["content-disposition"]取 fileName,但是名称显示成问号问题

2022-03-09 15:42:09 +08:00
 HariopaNic

前端调下载文件接口,文件名用 headers["content-disposition"]的 fileName,

content-disposition: "attachment; filename=??03-01_data.zip"

但是汉字都变成了问号,已知后端已经转成了 utf-8 。 是前端拿到之后还要转一次,还是后端写错了- -?

1279 次点击
所在节点    问与答
13 条回复
NCry
2022-03-09 15:46:21 +08:00
关注下,我之前也遇到过这个问题,后来没解决,而是直接问后端的文件名称生成规则然后自己原样生成了一个名称。
ch2
2022-03-09 15:48:31 +08:00
Fiddler 抓包看一看报文里到底是什么字符串,编码是什么
yuzo555
2022-03-09 15:53:01 +08:00
littleylv
2022-03-09 15:57:45 +08:00
后端把 filename 的值 url encode 一下试试
HariopaNic
2022-03-09 16:03:02 +08:00
@yuzo555 老哥高估我了 完全看不懂
aragakiyuii
2022-03-09 16:37:26 +08:00
标准的是 attachment;filename=xxxx;filename*=UTF-8''xxxxxx
Header 里的内容只支持 ASCII
所以得把文件名用 URL encode 一下
aragakiyuii
2022-03-09 16:38:48 +08:00
aragakiyuii
2022-03-09 16:51:22 +08:00
@aragakiyuii #6 说的不太严谨,理解一下大概的意思就行了
HariopaNic
2022-03-09 19:20:24 +08:00
@aragakiyuii 十分感谢!
coffeeing
2022-11-07 15:10:39 +08:00
这几天正为这个问题头疼,搜到这里,请教各位,这些代码是写在前端网页里,还是写在服务端里? 谢谢谢谢


Content-Disposition: attachment;
filename="$encoded_fname";
filename*=utf-8''$encoded_fname
coffeeing
2022-11-07 15:12:29 +08:00
@HariopaNic 麻烦大佬指点下,Content-Disposition: attachment;
filename="$encoded_fname";
filename*=utf-8''$encoded_fname ,这些是写在 http 的 head 么?还是写在服务端的配置文件里?谢谢谢谢
HariopaNic
2022-11-07 19:30:14 +08:00
@coffeeing 让后端同学把 filename 处理成 url 编码,然后放到 response.header 中,前端拿到之后用 decodeURIComponent 转一下。我看了一下之前跟后端讨论的记录,他的代码大概是 java.net.URLEncoder.encode(filename),response.setHeader(HttpHeaders.CONTENT_DISPOSITION ,......) 供参考
coffeeing
2022-11-07 19:44:20 +08:00
@HariopaNic 感谢感谢,我转给后端同学看看,我目前做的是直接写在 html 里,但是下载后不显示文件名,文件大小。。。。。

<html>
<head>
<meta Content-Type="application/octet-stream" >
<meta Content-Disposition="attachment;filename=$encoded_fname;filename*=utf-8''$encoded_fname">
<meta X-Content-Type-Options="nosniff">
<meta charset="utf-8">
</head>
<body >
<a href="https://www.solaredufn.com/upload/download/56954.mp4" target="_blank" data-url="https://www.solaredufn.com/upload/download/56954.mp4" download="https://www.solaredufn.com/upload/download/56954.mp4" style="font-size:24px" >下载测试</a>
</body>
</html>

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/839160

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX