我的场景是PDF文件自动下载,用户填写后,点击PDF中的提交按钮时连接到Java servlet并将其保存在数据库中。
- 用户点击按钮
- JavaScript代码运行并自动下载PDF文件
- 使用JavaScript自动打开文件
- 用户填写并按提交
- 提交后,servlet代码运行并将数据保存在数据库中
在我的应用程序中,只有第2点缺失。请提供如何使用JavaScript与扩展程序进行交互以自动下载文件的代码。 我只想下载文件。
我的场景是PDF文件自动下载,用户填写后,点击PDF中的提交按钮时连接到Java servlet并将其保存在数据库中。
在我的应用程序中,只有第2点缺失。请提供如何使用JavaScript与扩展程序进行交互以自动下载文件的代码。 我只想下载文件。
使用download属性。
var link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));
同时也可以在新窗口打开pdf链接,然后由浏览器处理其余部分:
window.open(pdfUrl, '_blank');
或者:
window.open(pdfUrl);
/* Helper function */
function download_file(fileURL, fileName) {
// for non-IE
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
var filename = fileURL.substring(fileURL.lastIndexOf('/')+1);
save.download = fileName || filename;
if ( navigator.userAgent.toLowerCase().match(/(ipad|iphone|safari)/) && navigator.userAgent.search("Chrome") < 0) {
document.location = save.href;
// window event not working here
}else{
var evt = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
});
save.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
}
}
// for IE < 11
else if ( !! window.ActiveXObject && document.execCommand) {
var _window = window.open(fileURL, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, fileName || fileURL)
_window.close();
}
}
download_file(fileURL, fileName); //call function
(function ($) {
$(document).ready(function(){
function validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
if($('.submitclass').length){
$('.submitclass').click(function(){
$email_id = $('.custom-email-field').val();
if (validateEmail($email_id)) {
var url= $(this).attr('pdf_url');
var link = document.createElement('a');
link.href = url;
link.download = url.split("/").pop();
link.dispatchEvent(new MouseEvent('click'));
}
});
}
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<div class="form-item form-type-textfield form-item-email-id form-group">
<input placeholder="please enter email address" class="custom-email-field form-control" type="text" id="edit-email-id" name="email_id" value="" size="60" maxlength="128" required />
</div>
<button type="submit" class="submitclass btn btn-danger" pdf_url="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">Submit</button>
</form>
或者在 HTML5 中使用 download 属性 来标记标签
// Define the URL of the PDF file
var pdfUrl = "http://example.com/path/to/your/pdf.pdf";
// Function to trigger the download
function downloadPdf() {
fetch(pdfUrl)
.then(response => response.blob())
.then(blob => {
// Create a blob URL for the PDF data
var url = window.URL.createObjectURL(blob);
// Create a link element to trigger the download
var a = document.createElement("a");
a.href = url;
a.download = "downloaded.pdf"; // Set the desired file name
document.body.appendChild(a);
// Trigger a click event on the link element to initiate the download
a.click();
// Clean up by revoking the blob URL and removing the link element
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
})
.catch(error => {
console.error("Failed to download the PDF file: ", error);
});
}
// Call the downloadPdf() function when needed, e.g., in response to a button click
document.getElementById("downloadButton").addEventListener("click", downloadPdf);
您可以在按钮点击或任何其他用户操作中调用downloadPdf()函数以启动下载。
例如,您正在使用PHP,并且$filepath包含PDF文件路径。
因此,您可以编写类似以下的JavaScript代码来模拟下载对话框:
<script language="javascript">
window.location.href = '<?php echo $filepath; ?>';
</script
document.location = 'url of pdf'
- Jaromanda X