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

相关推荐
于慨16 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz16 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶16 小时前
前端交互规范(Web 端)
前端
CHU72903516 小时前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing16 小时前
Page-agent MCP结构
前端·人工智能
王霸天17 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航17 小时前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
@大迁世界17 小时前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript
PieroPc17 小时前
一个功能强大的 Web 端标签设计和打印工具,支持服务器端直接打印到局域网打印机。Fastapi + html
前端·html·fastapi
悟空瞎说17 小时前
深入 Vue3 响应式:为什么有的要加.value,有的不用?从设计到源码彻底讲透
前端·vue.js