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

相关推荐
往事随风灬11 小时前
我被 Volta 的“智能”坑了一下午:pnpm 为何无视项目 Node 版本?
前端·vue.js
xiaofeichaichai12 小时前
Tree Shaking
前端·javascript
lichenyang45312 小时前
给 ArkTS 应用做一个内置的「Network 面板」:实时看清 SSE 每一帧和最后那张卡片
前端
倾颜12 小时前
从手写 Runner 到 LangGraph:受控 Agent 接入 LangGraph
前端·后端·langchain
UXbot12 小时前
AI网页开发工具能替代工具吗?5大平台对比
前端·人工智能·低代码·ui·原型模式·web app
wuhen_n12 小时前
从零到一!前端搭建本地轻量化 RAG 问答系统
前端·langchain·ai编程
奥利奥夹心脆芙12 小时前
辅助排查 HTTP 接口代码报错,实操完整案例分享
http
落日漫游12 小时前
代码报错难排查?借助Gemini快速修复
前端
niconicoC12 小时前
让 Three.js 场景更真实:我用高斯泼溅和 SparkJS 做了一个可交互的 3D Demo
前端·webgl
Darling噜啦啦12 小时前
JavaScript 数组深度解析:从纯函数到二维数组陷阱,一文吃透前端数据结构核心
前端·javascript·数据结构