123 safari 浏览器中下载 URLEncoder.encode 的中文名称的文件, safari 未进行解码, 其他浏览器正常

前言

这是 最近碰到的一个 关于文件下载的一个问题

然后 只有 safari 中出现了 此问题, 大概 可能是 不同的浏览器对于 http 协议的细节支持有所差异吧

大概就是 有一个 服务提供了文件下载的功能, 然后 次服务使用的是 URLEncoder.encode 进行编码了, 然后 大多数 主流浏览器 下载都是正常下载中文名

但是 safari 中下载, 下载的文件名 还是 URLEncoder.encode 编码之后的结果的文件名 然后 造成的问题

测试用例

该测试服务如下, 这里 模拟一下

复制代码
    /**
     * downloadTxt
     *
     * @param response  response
     * @return void
     * @author Jerry.X.He
     * @date 2024-09-21 10:56
     */
    @GetMapping("/downloadTxt")
    public void downloadTxt(HttpServletResponse response) throws Exception {
        response.setContentType("application/octet-stream");

        // Content-Disposition use URLEncoder.encode
        String filename = URLEncoder.encode("下载_2024.txt", "utf8");
        response.setHeader("Content-Disposition", "attachment; filename=\"" + filename + "\"");

        // Content-Disposition specify encoding
//        String encodedFileName = URLEncoder.encode("下载_2024.txt", "UTF-8").replaceAll("\\+", "%20");
//        String contentDispositionValue = "attachment; filename*=UTF-8''" + encodedFileName;
//        response.setHeader("Content-Disposition", contentDispositionValue);

        try {
            OutputStream os = response.getOutputStream();
            os.write("1.txt".getBytes());
            os.flush();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

chrome 中下载如下 可以看到 文件名是正常的

safari 中下载如下, 可以看到 是 URLEncoder.encode 之后的结果

问题的解决

在 Content-Disposition 中指定编码, 这样 浏览器支持 RFC 5987 的话, 就可以进行正确的 解码了

复制代码
        String encodedFileName = URLEncoder.encode("下载_2024.txt", "UTF-8").replaceAll("\\+", "%20");
        String contentDispositionValue = "attachment; filename*=UTF-8''" + encodedFileName;
        response.setHeader("Content-Disposition", contentDispositionValue);

safari 中下载如下, 可以看到 问题解决了

相关推荐
onebyte8bits3 分钟前
前端国际化(i18n)体系设计与工程化落地
前端·国际化·i18n·工程化
C澒11 分钟前
前端分层架构实战:DDD 与 Clean Architecture 在大型业务系统中的落地路径与项目实践
前端·架构·系统架构·前端框架
BestSongC15 分钟前
行人摔倒检测系统 - 前端文档(1)
前端·人工智能·目标检测
0思必得01 小时前
[Web自动化] Selenium处理滚动条
前端·爬虫·python·selenium·自动化
Misnice1 小时前
Webpack、Vite、Rsbuild区别
前端·webpack·node.js
青茶3601 小时前
php怎么实现订单接口状态轮询(二)
前端·php·接口
大橙子额2 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
爱喝白开水a3 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
董世昌413 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
吃杠碰小鸡4 小时前
高中数学-数列-导数证明
前端·数学·算法