前端下载文件从 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 。 是前端拿到之后还要转一次，还是后端写错了- -？

1248 次点击
所在节点    问与答
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
see https://datatracker.ietf.org/doc/html/rfc5987#section-3.2.2
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
可以看看这个 blog
https://blog.robotshell.org/2012/deal-with-http-header-encoding-for-file-download/
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