如何将下拉菜单选中值传递给Pyodide中的Python代码？

需求目标 #

• 读取用户选择的输入文件
• 将文件内容转换为小写
• 追加用户选中的“strand”值（例如字符串"negative"）
• 将结果写入可由用户下载的文件out.txt

预期与实际输出 #

对于内容为Hello World!的输入文件，期望输出：

hello world!
negative

实际得到的输出：

hello world!
[object HTMLSelectElement]

原始页面代码 #

<!doctype html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
  </head>
  <body>
    Input file:
    <button>Select file</button>
    <br>
    <br>
    Strand:
    <select id="strand" class="form-control sprites-arrow-down" name="strand" value>
      <option id="val" value="positive" selected>positive</option>
      <option id="val" value="negative">negative</option>
    </select>
    <br>
    <br>
 
    <script type="text/javascript">
      async function main() {
          // Get the file contents into JS
          const [fileHandle] = await showOpenFilePicker();
          const fileData = await fileHandle.getFile();
          const contents = await fileData.text();
          
          var d = document;
          d.g = d.getElementById;
          var strand = d.g("strand");
          
          // Create the Python convert toy function
          let pyodide = await loadPyodide();
          let convert = pyodide.runPython(`
from pyodide.ffi import to_js
def convert(contents, strand):
    return to_js(contents.lower() + str(strand))
convert
      `);

          let result = convert(contents, strand);
          console.log(result);
          
          const blob = new Blob([result], {type : 'application/text'});
          
          let url = window.URL.createObjectURL(blob);
          
          var downloadLink = document.createElement("a");
          downloadLink.href = url;
          downloadLink.text = "Download output";
          downloadLink.download = "out.txt";
          document.body.appendChild(downloadLink);
          
      }
      const button = document.querySelector('button');
      button.addEventListener('click', main);
    </script>
  </body>
</html>

解决方案 #

问题原因 #

代码中直接将HTML下拉菜单的DOM对象（HTMLSelectElement）传递给了Python函数，Python转换字符串时会得到[object HTMLSelectElement]，而非选中的选项值；同时缺少换行符，导致strand值无法单独占一行。

修改步骤 #

1. 获取下拉菜单选中值
   将获取strand的代码从：

var strand = d.g("strand");

修改为：

var strand = d.g("strand").value;

2. 添加换行符
   将Python函数中的字符串拼接代码从：

return to_js(contents.lower() + str(strand))

修改为：

return to_js(contents.lower() + "\n" + str(strand))

修改后的完整代码 #

<!doctype html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
  </head>
  <body>
    Input file:
    <button>Select file</button>
    <br>
    <br>
    Strand:
    <select id="strand" class="form-control sprites-arrow-down" name="strand" value>
      <option id="val" value="positive" selected>positive</option>
      <option id="val" value="negative">negative</option>
    </select>
    <br>
    <br>
 
    <script type="text/javascript">
      async function main() {
          // Get the file contents into JS
          const [fileHandle] = await showOpenFilePicker();
          const fileData = await fileHandle.getFile();
          const contents = await fileData.text();
          
          var d = document;
          d.g = d.getElementById;
          var strand = d.g("strand").value;
          
          // Create the Python convert toy function
          let pyodide = await loadPyodide();
          let convert = pyodide.runPython(`
from pyodide.ffi import to_js
def convert(contents, strand):
    return to_js(contents.lower() + "\n" + str(strand))
convert
      `);

          let result = convert(contents, strand);
          console.log(result);
          
          const blob = new Blob([result], {type : 'application/text'});
          
          let url = window.URL.createObjectURL(blob);
          
          var downloadLink = document.createElement("a");
          downloadLink.href = url;
          downloadLink.text = "Download output";
          downloadLink.download = "out.txt";
          document.body.appendChild(downloadLink);
          
      }
      const button = document.querySelector('button');
      button.addEventListener('click', main);
    </script>
  </body>
</html>

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