HTML/JS如何实现下载JS生成文件时触发保存位置选择弹窗

原因说明 #

你当前使用的<a>标签download属性触发的下载行为，完全由用户浏览器的默认配置决定：如果用户没有开启「每次下载都询问保存位置」的选项，文件会直接下载到默认下载目录，前端代码无法通过这个方式强制唤起路径选择弹窗。

推荐实现方式 #

使用W3C标准的File System Access API中的showSaveFilePicker()方法，该方法可以主动唤起系统级的文件保存路径选择窗口，不受浏览器默认下载配置的影响，完全符合你的需求。

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义路径下载示例</title>
</head>
<body>
    <button id="downloadBtn">下载文件</button>

    <script>
        const downloadBtn = document.getElementById('downloadBtn');

        // 下载函数，兼容新旧方案
        async function downloadFile(filename, content) {
            // 优先使用File System Access API唤起路径选择
            if ('showSaveFilePicker' in window) {
                try {
                    const handle = await window.showSaveFilePicker({
                        suggestedName: filename,
                        types: [
                            {
                                description: '文本文件',
                                accept: {
                                    'text/plain': ['.txt'],
                                },
                            },
                        ],
                    });
                    // 写入文件内容
                    const writable = await handle.createWritable();
                    await writable.write(content);
                    await writable.close();
                    return;
                } catch (err) {
                    // 用户主动取消选择的情况不需要额外处理
                    if (err.name !== 'AbortError') {
                        console.error('保存失败:', err);
                    }
                    return;
                }
            }
            // 降级方案：兼容不支持新API的浏览器，使用原a标签下载逻辑
            const element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
            element.setAttribute('download', filename);
            element.click();
        }

        // 绑定按钮点击事件
        downloadBtn.addEventListener('click', () => {
            downloadFile('hello.txt', 'This is the content');
        });
    </script>
</body>
</html>

注意事项 #

• 该API仅可在安全上下文（HTTPS协议或者localhost本地调试）中运行，否则会被浏览器禁用
• API调用必须放在用户交互事件（比如点击、触摸）的回调中执行，页面加载时直接静默调用会被浏览器拦截
• 目前主流新版浏览器（Chrome 86+、Edge 86+、Safari 15.2+、Firefox 115+）均已支持该API，旧版本浏览器会自动降级到普通下载逻辑
• 如果你不想使用新API，只能引导用户手动开启浏览器的「每次下载都询问保存位置」开关实现，但该操作属于用户端配置，前端代码无法强制控制

内容的提问来源于stack exchange，提问作者Mathew