form表单提交下载文件前端代码怎么写

以下是一个简单的示例代码，可以实现通过表单提交下载文件的功能：

HTML代码：

<form action="download.php" method="post">
  <input type="hidden" name="filename" value="example.pdf">
  <input type="submit" value="Download">
</form>

其中，`action`属性指定了提交表单的URL，`method`属性指定了提交方式为POST。`input`元素中的`hidden`类型可以隐藏一个表单字段，用于传递文件名信息。

JavaScript代码：

// 监听表单提交事件
document.querySelector('form').addEventListener('submit', function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  // 获取文件名
  var filename = this.elements['filename'].value;
  // 构造下载链接
  var link = document.createElement('a');
  link.href = 'download.php?filename=' + encodeURIComponent(filename);
  link.download = filename;
  // 触发点击事件
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

以上代码中，通过监听表单的提交事件，在表单提交前获取文件名信息，然后使用JavaScript动态创建一个下载链接，并触发点击事件，实现文件下载。其中，`encodeURIComponent`函数用于对文件名进行URL编码，以免出现特殊字符导致下载链接无法正常工作。