HTML JS实现点击按钮下载文件功能例子（C知道版）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
其实这篇应该算是一篇“水”文章为什么要这么“水”呢除了最近南方的气候闷热难耐需要降温之外另一个主要原因这里面所写的代码均是由CSDN的AI文本大模型"C知道"完成我在这里只是简单记录一下也方便其他有需求的同学借鉴一下少绕一些弯路有些弯路还是需要自己绕的。CSDN的AI文本大模型也是前几个月才推出的体验过几次效果不错对于各种技术问题的回答还是比较让人满意的不管是在学习上还是工作过程中都能帮到我们不少表示感谢
作者是搞C出身的对于前端的内容也只是项目上有需求了才会上网突击补补课有时对于一个可能比较简单普及的问题百度了很多也是没有合适满意的答案参考有些文章博客对于这些简单普及的问题也是设置了各种浏览限制要不加入会员要不开通VIP要不关注博主要不充钱十分不便这时一款好用的AI可谓帮我们做到了“万事不求人”下面内容即是一个例子最后一点还是需要注意酒虽好喝莫要贪杯。
实现一个点击按钮下载文件的例子
<!DOCTYPE html>
<html>
<head>
<title>文件下载示例</title>
</head>
<body>
<button onclick="downloadFile()">点击下载文件</button>
<script>
function downloadFile() {
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = 'path/to/your/file'; // 替换为你要下载的文件路径
// 设置下载文件的名称
downloadLink.download = 'filename.ext'; // 替换为你要下载的文件名称包括扩展名
// 触发点击事件进行下载
downloadLink.click();
}
</script>
</body>
</html>在上述基础上实现一个点击按钮下载固定后缀文件的功能
<!DOCTYPE html>
<html>
<head>
<title>文件下载示例</title>
</head>
<body>
<button onclick="downloadFile()">点击下载文件</button>
<script>
function downloadFile() {
var fileUrl = 'path/to/your/file'; // 替换为你要下载的文件路径
var fileName = 'filename.ext'; // 替换为你要下载的文件名称包括扩展名
// 获取文件的后缀名
var fileExtension = fileName.split('.').pop();
// 判断文件后缀名是否符合条件这里以 .dat 和 .txt 为例
if (fileExtension === 'dat' || fileExtension === 'txt') {
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = fileUrl;
downloadLink.download = fileName;
downloadLink.click();
} else {
alert('只能下载 .dat 或者 .txt 文件');
}
}
</script>
</body>
</html>在上述基础上实现点击按钮下载多个文件的例子
<!DOCTYPE html>
<html>
<head>
<title>下载多个文件示例</title>
</head>
<body>
<h1>点击按钮同时下载多个文件</h1>
<button onclick="downloadFiles()">点击下载文件</button>
<script>
function downloadFiles() {
// 定义要下载的文件URL和名称
var files = [
{ url: 'path/to/file1.ext', name: 'filename1.ext' },
{ url: 'path/to/file2.ext', name: 'filename2.ext' },
// 添加更多文件...
];
// 创建一个隐藏的<a>元素并添加到页面中
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
// 循环遍历文件数组并依次下载文件
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 设置文件的URL和名称
link.href = file.url;
link.download = file.name;
// 模拟用户点击下载链接
link.click();
}
// 清理临时元素
document.body.removeChild(link);
}
</script>
</body>
</html>有点需要注意的是如果你是将WEB SERVER搭建在嵌入式Linux下比如我前面的文章提到的在嵌入式Linux环境下移植boa web server在设置下载文件的路径时需要先修改嵌入式环境下的boa.conf对应的路径
比如我的boa.conf对应的内容为
Alias /doc /mnt3/ga_syslog
Alias /ocr /mnt3/ga01_zynq_log可以添加多行Alias,类似于一个typedef,在html里面写路径时就可以为'doc/xxx.log'、'ocr/xxx.log'等等重新开机后再检测否则下载不了文件。
在上述基础上实现点击按钮在文件浏览窗口中选择文件下载的例子
<!DOCTYPE html>
<html>
<head>
<title>选择文件下载示例</title>
</head>
<body>
<button onclick="selectAndDownloadFile()">点击选择文件并下载</button>
<script>
function selectAndDownloadFile() {
// 创建一个虚拟的 input 元素
var fileInput = document.createElement('input');
fileInput.type = 'file';
// 监听文件选择事件
fileInput.onchange = function(event) {
var selectedFile = event.target.files[0];
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(selectedFile);
downloadLink.download = selectedFile.name;
// 触发点击事件进行下载
downloadLink.click();
// 清除临时的 URL 对象
URL.revokeObjectURL(downloadLink.href);
};
// 触发点击事件选择文件
fileInput.click();
}
</script>
</body>
</html>在上述基础上实现在文件窗口只能显示固定后缀文件并选择下载的例子
<!DOCTYPE html>
<html>
<head>
<title>选择指定后缀文件下载示例</title>
</head>
<body>
<button onclick="selectAndDownloadFile()">点击选择 .pdf 文件并下载</button>
<script>
function selectAndDownloadFile() {
// 创建一个虚拟的 input 元素
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.pdf'; // 只接受 .pdf 文件如多种后缀可以以逗号分隔如'.pdf,.dat'
// 监听文件选择事件
fileInput.onchange = function(event) {
var selectedFile = event.target.files[0];
// 创建一个虚拟的链接元素
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(selectedFile);
downloadLink.download = selectedFile.name;
// 触发点击事件进行下载
downloadLink.click();
// 清除临时的 URL 对象
URL.revokeObjectURL(downloadLink.href);
};
// 触发点击事件选择文件
fileInput.click();
}
</script>
</body>
</html>