? ? ? ? 其實這篇應該算是一篇“水”文章，為什么要這么“水”呢，除了最近南方的氣候悶熱難耐需要降溫之外，另一個主要原因，這里面所寫的代碼均是由CSDN的AI文本大模型"C知道"完成，我在這里只是簡單記錄一下，也方便其他有需求的同學借鑒一下，少繞一些彎路（有些彎路還是需要自己繞的）。CSDN的AI文本大模型也是前幾個月才推出的，體驗過幾次，效果不錯，對于各種技術問題的回答還是比較讓人滿意的，不管是在學習上還是工作過程中都能幫到我們不少，表示感謝！
? ? ? ? 作者是搞C出身的，對于前端的內容也只是項目上有需求了才會上網(wǎng)突擊補補課，有時對于一個可能比較簡單普及的問題，百度了很多也是沒有合適滿意的答案參考，有些文章博客對于這些簡單普及的問題也是設置了各種瀏覽限制，要不加入會員要不開通VIP要不關注博主要不充錢，十分不便，這時一款好用的AI可謂幫我們做到了“萬事不求人”，下面內容即是一個例子，最后一點還是需要注意：酒雖好喝，莫要貪杯。
實現(xiàn)一個點擊按鈕下載文件的例子
<!DOCTYPE html>
<html>
<head>
<title>文件下載示例</title>
</head>
<body>
<button onclick="downloadFile()">點擊下載文件</button>
<script>
function downloadFile() {
// 創(chuàng)建一個虛擬的鏈接元素
var downloadLink = document.createElement('a');
downloadLink.href = 'path/to/your/file'; // 替換為你要下載的文件路徑
// 設置下載文件的名稱
downloadLink.download = 'filename.ext'; // 替換為你要下載的文件名稱（包括擴展名）
// 觸發(fā)點擊事件進行下載
downloadLink.click();
}
</script>
</body>
</html>在上述基礎上實現(xiàn)一個點擊按鈕下載固定后綴文件的功能
<!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') {
// 創(chuàng)建一個虛擬的鏈接元素
var downloadLink = document.createElement('a');
downloadLink.href = fileUrl;
downloadLink.download = fileName;
downloadLink.click();
} else {
alert('只能下載 .dat 或者 .txt 文件');
}
}
</script>
</body>
</html>在上述基礎上實現(xiàn)點擊按鈕下載多個文件的例子
<!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' },
// 添加更多文件...
];
// 創(chuàng)建一個隱藏的<a>元素并添加到頁面中
var link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);
// 循環(huán)遍歷文件數(shù)組，并依次下載文件
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環(huán)境下移植boa web server，在設置下載文件的路徑時需要先修改嵌入式環(huán)境下的boa.conf對應的路徑，
比如我的boa.conf對應的內容為：
Alias /doc /mnt3/ga_syslog
Alias /ocr /mnt3/ga01_zynq_log可以添加多行Alias,類似于一個typedef,在html里面寫路徑時就可以為'doc/xxx.log'、'ocr/xxx.log'等等，重新開機后再檢測，否則下載不了文件。
在上述基礎上實現(xiàn)點擊按鈕在文件瀏覽窗口中選擇文件下載的例子文章來源：http://www.zghlxwxcb.cn/news/detail-608113.html
<!DOCTYPE html>
<html>
<head>
<title>選擇文件下載示例</title>
</head>
<body>
<button onclick="selectAndDownloadFile()">點擊選擇文件并下載</button>
<script>
function selectAndDownloadFile() {
// 創(chuàng)建一個虛擬的 input 元素
var fileInput = document.createElement('input');
fileInput.type = 'file';
// 監(jiān)聽文件選擇事件
fileInput.onchange = function(event) {
var selectedFile = event.target.files[0];
// 創(chuàng)建一個虛擬的鏈接元素
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(selectedFile);
downloadLink.download = selectedFile.name;
// 觸發(fā)點擊事件進行下載
downloadLink.click();
// 清除臨時的 URL 對象
URL.revokeObjectURL(downloadLink.href);
};
// 觸發(fā)點擊事件選擇文件
fileInput.click();
}
</script>
</body>
</html>在上述基礎上，實現(xiàn)在文件窗口只能顯示固定后綴文件并選擇下載的例子文章來源地址http://www.zghlxwxcb.cn/news/detail-608113.html
<!DOCTYPE html>
<html>
<head>
<title>選擇指定后綴文件下載示例</title>
</head>
<body>
<button onclick="selectAndDownloadFile()">點擊選擇 .pdf 文件并下載</button>
<script>
function selectAndDownloadFile() {
// 創(chuàng)建一個虛擬的 input 元素
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.pdf'; // 只接受 .pdf 文件，如多種后綴，可以以逗號分隔，如'.pdf,.dat'
// 監(jiān)聽文件選擇事件
fileInput.onchange = function(event) {
var selectedFile = event.target.files[0];
// 創(chuàng)建一個虛擬的鏈接元素
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(selectedFile);
downloadLink.download = selectedFile.name;
// 觸發(fā)點擊事件進行下載
downloadLink.click();
// 清除臨時的 URL 對象
URL.revokeObjectURL(downloadLink.href);
};
// 觸發(fā)點擊事件選擇文件
fileInput.click();
}
</script>
</body>
</html>到了這里，關于HTML JS實現(xiàn)點擊按鈕下載文件功能例子（C知道版）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
