输入用户名和emailid，从文件夹下载同名(name+emailid)的pdf证书

Question

您能否修改下面的代码，以便用户输入他的名字和电子邮件id，并且从ooecercertificate文件夹

下载具有相同(名字和电子邮件id)的PDF证书?调用JavaScript函数

function myFunction()
{
var downloadUrl = document.getElementById("url").value;
document.getElementById("downlod").href = '/ooecertificate' + downloadUrl + '.pdf';
}

alert("You are Successfully Called the JavaScript function");  
}  

<div>
<label>ENTER YOUR REGISTRATION ID:</label> 
<br> </br>

<label>(Your registration id is your firstname+registered email id:
for example if your name is SAMMY DIXIT and 
your registered email id is [e-mail]
your REGISTRATION ID WILL BE: [e-mail]
</label> 

<input type="text" name="url" id="url" onkeyup="myFunction()"> 

<a href="/OOEcertificate" id="downlod" download><span>Download</span></a>

</div>
</div>   

Answer 1

这是一个从您的代码开始的演示，它将从输入框#url中获取值，并使用该值组成url字符串，该字符串将用于在浏览器中导航到pdf下载。

这样的行为是用window.location.href获得的，我在这里注释了它以使演示工作。它将在控制台中显示url。

function downloadPdf(){    

//fetch the registrationId from the input#url
let registrationId = document.getElementById("url").value;        

//transform the registrationId string to lower case
registrationId = registrationId.trim().toLowerCase();

const pdfUrl = `/ooecertificate/${registrationId}.pdf`;        

//this is the statement to redirect the browser to the wanted url
//now commented because it wouldn't work here on the snippet

//window.location.href = pdfUrl;

//on its behalf I'm writing the url on console
console.log(pdfUrl);
}

label.fieldLabel{
display: block;
margin-bottom: 1rem;
}
label.fieldDescription{
display: block;
margin-bottom: 1rem;   
border: solid 1px gray;
padding: 1em;
}
button{
cursor: pointer;
}

<div>
<label class="fieldDescription">
Your registration id is your firstname+registered email id:<br>
For example..<br>
if your name is SAMMY DIXIT and your registered email id is [e-mail]<br>
your REGISTRATION ID WILL BE: <b>[e-mail]</b>
</label> 
<label class="fieldLabel">ENTER YOUR REGISTRATION ID:</label>   
<input type="text" name="url" id="url"> 
<button onclick="downloadPdf();">Download</button>

</div>