前端下载文件的方式

最新推荐文章于 2020-08-17 15:52:20 发布

孙瑞宇

最新推荐文章于 2020-08-17 15:52:20 发布

阅读量195

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/wsj1/p/11543983.html

版权

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

方式一：使用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 
         >