React.js中点击下载按钮时如何打开文件保存路径的文件系统？

你当前的代码通过创建<a>标签触发默认下载，这种方式会直接使用浏览器默认的下载路径，无法主动唤起文件系统的保存选择窗口。要实现点击按钮让用户自主选择保存位置和文件名，可以使用File System Access API——这是现代浏览器提供的原生API，支持直接与本地文件系统交互。

修改后的代码如下：

import React, { useState } from 'react';

function SaveToFile() {
  const [content, setContent] = useState('');

  const handleContentChange = (event) => {
    setContent(event.target.value);
  };

  const handleSave = async () => {
    try {
      // 唤起文件保存选择对话框，指定默认文件名和允许的文件类型
      const fileHandle = await window.showSaveFilePicker({
        suggestedName: 'myFile.txt',
        types: [
          {
            description: '纯文本文件',
            accept: { 'text/plain': ['.txt'] },
          },
        ],
      });

      // 创建可写流并写入内容，完成后关闭流
      const writable = await fileHandle.createWritable();
      await writable.write(content);
      await writable.close();
    } catch (err) {
      // 处理用户取消选择或其他错误
      console.error('文件保存失败:', err);
    }
  };

  return (
    <div>
      <textarea value={content} onChange={handleContentChange} />
      <button onClick={handleSave}>选择位置保存文件</button>
    </div>
  );
}

export default SaveToFile;

关键说明： #

• showSaveFilePicker()：异步方法，调用后会唤起系统原生的文件保存对话框，用户可自定义保存路径和文件名。参数中suggestedName为默认显示的文件名，types用于限制可选的文件类型。
• 文件写入流程：通过获取到的文件句柄创建可写流，写入内容后关闭流，完成本地文件的保存操作。
• 兼容性：该API支持Chrome、Edge、Firefox 118及以上版本，Safari目前暂未支持。如果需要兼容旧浏览器，可以保留原有的<a>标签下载逻辑作为降级方案。

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