HTML JS实现点击按钮下载文件功能例子（C知道版）

其实这篇应该算是一篇"水"文章，为什么要这么"水"呢，除了最近南方的气候闷热难耐需要降温之外，另一个主要原因，这里面所写的代码均是由CSDN的AI文本大模型"C知道"完成，我在这里只是简单记录一下，也方便其他有需求的同学借鉴一下，少绕一些弯路（有些弯路还是需要自己绕的）。CSDN的AI文本大模型也是前几个月才推出的，体验过几次，效果不错，对于各种技术问题的回答还是比较让人满意的，不管是在学习上还是工作过程中都能帮到我们不少，表示感谢！

作者是搞C出身的，对于前端的内容也只是项目上有需求了才会上网突击补补课，有时对于一个可能比较简单普及的问题，百度了很多也是没有合适满意的答案参考，有些文章博客对于这些简单普及的问题也是设置了各种浏览限制，要不加入会员要不开通VIP要不关注博主要不充钱，十分不便，这时一款好用的AI可谓帮我们做到了"万事不求人"，下面内容即是一个例子，最后一点还是需要注意：酒虽好喝，莫要贪杯。

实现一个点击按钮下载文件的例子

html 复制代码

<!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>

在上述基础上实现一个点击按钮下载固定后缀文件的功能

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>

在上述基础上实现点击按钮下载多个文件的例子

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对应的内容为：

html 复制代码

Alias /doc /mnt3/ga_syslog
Alias /ocr /mnt3/ga01_zynq_log

可以添加多行Alias,类似于一个typedef,在html里面写路径时就可以为'doc/xxx.log'、'ocr/xxx.log'等等，重新开机后再检测，否则下载不了文件。

在上述基础上实现点击按钮在文件浏览窗口中选择文件下载的例子

html 复制代码

<!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>

在上述基础上，实现在文件窗口只能显示固定后缀文件并选择下载的例子

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>