基于Pyodide实现本地文本文件选择与读取的问题求助

核心思路 #

放弃需要特殊权限的showDirectoryPicker，改用原生<input type="file">文件选择控件——这是所有主流浏览器（包括普通Chrome）都支持的标准方案，天然满足用户手势触发要求，能彻底避免之前的DOMException错误。

实现步骤 #

1. 添加文件选择按钮到页面 #

在HTML中插入带样式的文件选择控件，用自定义按钮触发原生选择框，提升用户体验：

<!-- 隐藏原生文件输入，用按钮触发 -->
<input type="file" id="fileSelector" accept=".txt" style="display: none;">
<button onclick="document.getElementById('fileSelector').click()">选择纯文本文件</button>
<!-- 用于显示Python处理结果 -->
<div id="resultArea"></div>

• accept=".txt"限制用户只能选择文本文件，避免无效输入
• 隐藏原生输入框，用按钮触发，比原生控件更美观

2. 监听文件选择，将内容传给Pyodide #

添加JavaScript代码，完成Pyodide初始化、文件读取、内容传递的逻辑：

// 初始化Pyodide环境
async function initPyodide() {
  window.pyodide = await loadPyodide({
    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/"
  });
}

// 监听文件选择事件
document.getElementById('fileSelector').addEventListener('change', async function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 读取文件内容为纯文本
  const rawContent = await selectedFile.text();

  // 将内容传入Pyodide并执行处理逻辑
  await window.pyodide.runPythonAsync(`
    # 接收从JS传入的文件内容
    file_content = """${rawContent.replace(/"/g, '\\"')}"""
    # 逐行读取处理（示例：转小写并输出）
    processed_lines = []
    for line in file_content.split('\\n'):
        stripped_line = line.strip()
        if stripped_line:
            processed_lines.append(stripped_line.lower())
    
    # 将结果输出到stdout，供JS读取
    print('\\n'.join(processed_lines))
  `);

  // 把Python的输出显示到页面
  document.getElementById('resultArea').textContent = window.pyodide.stdout;
});

// 页面加载时初始化Pyodide
initPyodide();

• 用file.text()直接读取文本文件，无需处理二进制流
• 传递内容时转义双引号，避免Python字符串语法报错
• 通过file_content.split('\\n')实现逐行读取，跳过空行后处理

3. 替换原假数据逻辑 #

把你代码中inp_str = 'ACGTACGT'的假数据逻辑，替换为上述代码中从JS传入的file_content即可，直接基于真实文件内容处理。

关键说明 #

• 无需用户手动启用任何浏览器特殊API，普通Chrome用户直接可用
• 完全符合浏览器的用户手势要求，不会触发Must be handling a user gesture错误
• 支持任意大小的文本文件（浏览器内存允许范围内），逐行处理逻辑可按需修改

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