前端:文件下载功能


需求:页面上有一个下载按钮,点击后实行文件下载功能。

方式一:使用window.open()

方式二:使用form表单下载

方式三:使用a标签,H5中有download属性

还可以使用第三方类库:npm install downloadjs

 

方式一:使用window.open()

     var exportURL = "/moduleName/rest/exportdata?startDate=" + startDate + "&endDate=" + endDate;
        console.log(exportURL);
        ajaxWrapper(exportURL, function () {
            window.open(exportURL, "_blank");//打开一个新的窗口,调用下载的API
        }, function () {          
                alert("Error");
                window.location.reload();            
        });

方式一中存在一个问题: 下载文件时,能不能不打开新的窗口?(打开新的窗口需要设置浏览器:偏好设置->安全性,去掉阻止弹窗的复选框)

方式二:使用form表单下载 

//通过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();  
        }); 

方式三:使用a标签

<div>
        <a href="zip/file-1.zip" download="test.zip">点击下载文件</a>
</div>

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM