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

这篇具有很好参考价值的文章主要介绍了HTML JS实现点击按钮下载文件功能例子（C知道版）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

其实这篇应该算是一篇“水”文章，为什么要这么“水”呢，除了最近南方的气候闷热难耐需要降温之外，另一个主要原因，这里面所写的代码均是由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>

在上述基础上，实现在文件窗口只能显示固定后缀文件并选择下载的例子文章来源地址https://www.toymoban.com/news/detail-608113.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>

到了这里，关于HTML JS实现点击按钮下载文件功能例子（C知道版）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！