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 中下载如下, 可以看到 问题解决了

相关推荐
涛涛ing9 分钟前
125秒到10秒:TypeScript 7.0用Go重写编译器,前端圈等了14年
前端
爱勇宝19 分钟前
初创公司的“自己人”,到底能当多久?
前端·后端·程序员
晴天1624 分钟前
前端模块化规范全景解析:CommonJS、AMD、ESM、UMD
前端
三十而立洋1 小时前
深入理解 npm:从核心机制到常用命令全解析
前端·前端工程化
Canace1 小时前
最新版 Codex 工作流的问题
前端·人工智能·agent
变与不变8061 小时前
引用类型、内存原理与对象
开发语言·前端·javascript
jearry1 小时前
给 C++ 老程序补现代 UI:WebView2 多入口资源加载与虚拟主机名实践
前端
打呵欠的猫1 小时前
让 AI 帮你写 Git Commit Message:从"fix bug"到语义化提交只需一个 Hook
前端·ai编程
labixiong1 小时前
CSS 锚点定位实测:零 JS 实现气泡跟随,自动翻转很香但暗藏 3 个致命坑
前端·css
qibmz1 小时前
用 DeepSeek 给 GitHub 仓库加 PR 自动 Review
前端