浏览器文件系统访问库（browser-fs-access）教程

1. 项目介绍

浏览器文件系统访问库（browser-fs-access）是Google Chrome Labs发起的一个开源项目，旨在提供一种优雅的方式在现代浏览器中访问本地文件系统。它支持渐进增强，当浏览器支持File System Access API时，它将利用该API；否则，它将回退到传统的文件操作方法。这个库的设计哲学是只导入应用程序所需的功能，以保持其大小最小。提供的主要功能包括fileOpen()、directoryOpen()和fileSave()。

2. 项目快速启动

首先，确保安装了browser-fs-access库：

npm install @googlechrome/browser-fs-access

然后，在你的JavaScript文件中引入所需的方法：

import { fileOpen } from '@googlechrome/browser-fs-access';

async function openFile() {
  try {
    const handle = await fileOpen();
    // 这里处理打开的文件
  } catch (error) {
    console.error('Error opening file:', error);
  }
}

openFile();

这段代码示例展示了如何使用fileOpen()方法来请求用户选择一个文件。

3. 应用案例和最佳实践

文件保存

要实现文件保存功能，可以这样做：

import { fileSave } from '@googlechrome/browser-fs-access';

async function saveFile(blob) {
  try {
    const handle = await window.showSaveFilePicker({
      types: [
        {
          description: 'Text Files',
          accepts: [{ mimeTypes: ['text/*'] }],
        },
      ],
    });

    const writable = await handle.createWritable();
    await writable.write(blob);
    await writable.close();
    console.log('文件已保存成功');
  } catch (err) {
    console.error('Error saving file:', err.name, err.message);
  }
}

在这个例子中，我们先获取用户的保存选择，然后创建一个可写流，写入Blob数据并关闭流。

渐进增强策略

由于File System Access API不是所有浏览器都支持，因此最好在尝试使用这些方法之前进行功能检测：

if ('showSaveFilePicker' in window) {
  // 使用browser-fs-access的方法
} else {
  // 回退到传统方式（如使用`a`标签下载）
}

4. 典型生态项目

browser-fs-access常与其他前端框架和库一起使用，例如React或Vue.js，用于构建更高级的应用场景，如在线文本编辑器、图像处理器等。此外，任何需要在浏览器环境中安全地读取、写入或保存用户文件的应用程序都是此库的好候选者。

示例项目

• Excalidraw - 一款在线的白板绘图工具，利用browser-fs-access实现在不同设备间同步画布状态。

通过这个教程，你应该对如何使用browser-fs-access有了基本了解。在实践中，你可以根据需求进一步定制和优化文件系统的交互体验。记得始终遵循最佳实践，确保在不支持新API的浏览器上也能正常运行。