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

相关推荐
颜进强几秒前
07 - OpenSpec change 修正带与照单施工:update 修订 + apply 实现
前端·后端·ai编程
京东云开发者11 分钟前
【全栈实践】第一个 AI Agent 项目:从零搭建 AI 音频创作助手【最终版】
前端·vue.js·音视频开发
12.=0.23 分钟前
【REVIEW_C】【持续更新】
服务器·前端·javascript
Vuji24 分钟前
Pi 插件解剖|todo.ts:297 行,拼出工具+命令+状态的完整插件
前端·agent
明月_清风28 分钟前
开发者写PPT自救指南:4类对接场景,把技术讲清楚
前端·后端·面试
探索前端28 分钟前
3dtiles加载时被地形遮挡问题研究及处理思路
前端·3d·cesium
Htr_36 分钟前
Vercel 使用指南:框架、工作流与基础设施一体化的现代 Web 部署平台
前端
一颗烂土豆1 小时前
ECharts 太平面?试试这款 Vue 3D 图表库
前端·vue.js·echarts
艺术留白1 小时前
MokaTest使用篇-HTTP接口
网络·网络协议·http
anyup1 小时前
迁移uni-app x,我是如何让 AI 把我一步步搞崩溃的...
前端·uni-app·trae