HTML表单文本条目基于javascript中的条目下载文件

Question

需要下面的表单能够基于用户输入下载pdf文件。

输入1234，按回车键或下载键，下载1234.pdf文件。
如果用户输入12345，则下载12345.pdf文件。

<form action="">
<span class="text-red">Invalid Code</span>
<div class="input-group input-group-lg">
<input type="text" class="form-control" value="" required/>
<input  class="btn btn-primary" type="submit" value="DOWNLOAD" />
</div>
</form>

Answer 1

按以下方式修改你的HTML代码

<form onsubmit="downloadURI()">
<span class="text-red">Invalid Code</span>
<div class="input-group input-group-lg">
<input type="text" id="fileNumber" class="form-control" value="" onkeypress="OnEnterKyePress(event)" required/>
<input  class="btn btn-primary" type="submit" value="DOWNLOAD" />
</div>
</form>

并使用以下JavaScript代码。在这里. ./表示HTML文件的根目录。/Data表示在HTML文件的根目录下有一个Data文件夹

function OnEnterKyePress(e){
if (e.keyCode == 13)
{
ldownloadURI();
}
}
function downloadURI()
{
var fileNumber=document.getElementById("fileNumber").value;  
var fileUri="../data";
downloadFile(fileUri, fileNumber+".pdf");
}
function downloadFile(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = URI;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}