首页 > 其他 > 详细

前端下载文件的方式

时间:2019-09-18 17:42:12      阅读:116      评论:0      收藏:0      [点我收藏+]

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

方式一:使用window.open()

方式二:使用form表单下载

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

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

 

方式一:使用window.open()

1
2
3
4
5
6
7
8
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表单下载 

1
2
3
4
5
6
7
8
9
10
11
//通过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标签

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

前端下载文件的方式

原文:https://www.cnblogs.com/wsj1/p/11543983.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!