html页面实现下载功能，html网页实现服务器下载、本地文件下载功能-CSDN博客

本文链接：https://blog.csdn.net/lyn1772671980/article/details/80066718

本文介绍了两种实现文件下载的方法：一种是使用 window.open() 直接打开下载链接；另一种是通过创建并提交表单来触发下载。后者对于需要从本地下载到服务器或本地的场景更为适用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用按钮进行监听下载的两种方法如下（推荐使用第二种，第一种若通过winddow.location.orgin获取协议+host+port时，网页会默认访问到网站的根目录下,Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址，若要下载的文件目录在Web根目录之外，则找不到路径，导致无法下载）

一是window.open()：适用于从服务器上下载到本地

[html]view plain copy
var $eleBtn1 = $("#btn1");  
        var $eleBtn2 = $("#btn2");  
  
        //已知一个下载文件的后端接口：https://codeload.github.com/douban/douban-client/legacy.zip/master  
        //方法一：window.open()  
        $eleBtn1.click(function(){  
            window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");  
        });  

二是表单提交：可以从本地下载到服务器，也可以从本地下载到本地（说到本地下载到本地，可能有的人就蒙圈了，本地有，干嘛要下载呢？原因是这样的：eg:若产品售出后,原来的代码都是经过混淆的，非开发人员不方便找到也看不了，所以需要下载未经过混淆的文件到本机，自主指定路径以方便使用）

[html]view plain copy
//方法二：通过form  
        $eleBtn2.click(function(){  
            var $eleForm = $("<form method='get'></form>");  
  
            $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");  
  
            $(document.body).append($eleForm);  
  
            //提交表单，实现下载  
            $eleForm.submit();  
        });  