如何用JavaScript实现HTML表单根据文本输入内容下载对应PDF文件？

首先可以给原有HTML元素添加唯一ID，方便JS选择操作，修改后的HTML代码如下：

<form action="" id="pdfDownloadForm">
  <span class="text-red" id="errorTip" style="display: none;">Invalid Code</span>
  <div class="input-group input-group-lg">
    <input type="text" class="form-control" id="pdfCodeInput" value="" required/>
    <input class="btn btn-primary" type="submit" value="DOWNLOAD" />
  </div>
</form>

添加如下JavaScript代码即可实现需求：

// 获取DOM元素
const downloadForm = document.getElementById('pdfDownloadForm');
const codeInput = document.getElementById('pdfCodeInput');
const errorTip = document.getElementById('errorTip');

// 监听表单提交事件
downloadForm.addEventListener('submit', function(e) {
  // 阻止默认表单提交跳转行为
  e.preventDefault();
  
  // 获取输入值并去除前后空格
  const inputCode = codeInput.value.trim();
  
  // 基础校验：可根据实际需求调整校验规则，比如仅允许数字、限定长度范围等
  if (!inputCode || /[^\w\d]/.test(inputCode)) {
    // 校验不通过显示错误提示
    errorTip.style.display = 'inline';
    return;
  }
  
  // 校验通过隐藏错误提示
  errorTip.style.display = 'none';
  
  // 构造PDF文件地址，可根据实际存放路径调整
  const pdfUrl = `./${inputCode}.pdf`;
  
  // 动态创建a标签触发下载
  const tempLink = document.createElement('a');
  tempLink.href = pdfUrl;
  tempLink.download = `${inputCode}.pdf`;
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
});

补充说明 #

• 如果需要限定只能输入4-5位数字，可将上述校验逻辑替换为if (!/^\d{4,5}$/.test(inputCode))即可
• 若PDF文件统一存放在指定目录下，比如/resources/pdf/，直接修改pdfUrl的构造规则为/resources/pdf/${inputCode}.pdf即可
• 代码同时支持回车键提交、点击DOWNLOAD按钮提交两种触发方式，符合需求要求
• 若需要处理PDF文件不存在的场景，可在构造地址后先发起HEAD请求校验资源是否存在，校验通过后再触发下载即可

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