如何实现用户输入指定字母数字密钥后触发对应文件下载的功能

实现方案 #

1. 修正后的HTML代码 #

你原有代码里多了一个冗余的</button>闭合标签，修正后代码如下，我额外给按钮加了id属性方便绑定点击事件，同时把按钮type从submit改成button，避免外层存在form标签时误触发表单提交：

<center>
  <input class="keyBox" type="text" placeholder="请输入下载密钥">
  <br><br>
  <div class="text-center">
    <button type="button" class="btn btn-style btn-primary" id="downloadBtn">下载文件</button>
  </div>
</center>

2. 功能实现JS代码 #

// 配置密钥与对应文件的映射关系，实际使用时替换为你自己的密钥和文件地址
const keyFileMap = {
  "密钥示例1": "https://你的域名/对应文件1.zip",
  "ABC123": "https://你的域名/对应资源包.pdf",
  "TEST456": "https://你的域名/对应安装包.exe"
};

// 绑定下载按钮点击事件
document.getElementById('downloadBtn').addEventListener('click', function() {
  // 获取用户输入的密钥，自动去除首尾空格
  const inputKey = document.querySelector('.keyBox').value.trim();
  
  // 校验输入是否为空
  if (!inputKey) {
    alert('请输入下载密钥');
    return;
  }
  
  // 匹配对应文件
  const targetFile = keyFileMap[inputKey];
  if (targetFile) {
    // 匹配成功，触发下载
    const a = document.createElement('a');
    a.href = targetFile;
    a.download = ''; // 留空默认使用服务器侧的文件名，也可手动指定文件名比如a.download = "专属资源包.zip"
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    // 下载触发后可清空输入框
    document.querySelector('.keyBox').value = '';
  } else {
    // 匹配失败提示
    alert('输入的密钥无效，请检查后重试');
  }
});

3. 注意事项 #

• 如果你对文件安全性要求较高，不要直接把密钥和文件地址的映射写在前端JS中，前端代码很容易被爬取到全量映射关系。高安全要求的场景建议把校验逻辑放到后端：用户提交密钥到后端接口，后端校验通过后返回文件流或者临时有效期的下载地址。
• 如果文件地址是跨域地址，部分浏览器可能会拦截a标签的download属性，导致直接打开文件而不是下载，这种情况需要后端配置响应头Content-Disposition: attachment来强制触发下载。

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