前端:文件下载功能

链式薄雾
• 阅读 1729

转载https://www.cnblogs.com/purple1/p/9106346.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表单下载
a.html文件

//需要引入jquery
<script src="./jquery-1.11.3.min.js"></script>
...
<div class="btn export" id="export">导 &nbsp;&nbsp;出</div>
//通过form 无需传递参数给后台
$('#export').click(function () {
var $eleForm = $("<form method='get'></form>");
$eleForm.attr("action", "your-url");
$(document.body).append($eleForm);
//提交表单,实现下载 
$eleForm.submit();
});
//通过form,需传递参数给后台时
$('#export').click(function () {
var $eleForm = $("<form id='exportFrom' method='get'></form>");
var $id = $("<input type='text' name='id' value='aa'/>");
var $token = $("<input type='text' name='token' value='12345'/>");
$eleForm.attr("action", "your-url");
$eleForm.prepend($id);  
$eleForm.prepend($token);       
$(document.body).append($eleForm);
$eleForm.submit();
})

注意:参数传递必须通过创建input输入框传递,而不是your-url?a=A&b=B这样的方式

方式三:使用a标签

<div>
    <a href="zip/file-1.zip" download="test.zip">点击下载文件</a>
</div>
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
java 如何判断操作系统是Linux还是Windows
转载自:https://www.cnblogs.com/yangw/p/5128059.htmlStringosSystem.getProperty("os.name");if(os.toLowerCase().startsWith("win")){System.out.println(os"can
Souleigh ✨ Souleigh ✨
4年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
CSS 奇思妙想:超级酷炫的边框动画
点上方蓝字关注公众号「前端从进阶到入院」精选原创好文助你进入大厂文章转载自公众号「iCSS前端趣闻」今天逛博客网站shoptalkshow\1\,看到这样一个界面,非常有意思:!(https://oscimg.oschina.net/oscnet/9655b35af5a045999ff55c144a3f7c
Wesley13 Wesley13
3年前
MS
转载:https://www.cnblogs.com/zll52011/p/10960905.html1.从美国矿物数据库下载矿物CIF(有晶格)2.晶胞CIF导入MS3.选择displaystyle中的ballandstick视图!(https://oscimg.oschina.net/oscnet/bcb7e13a0eb7e4
Stella981 Stella981
3年前
Dubbo爆出严重漏洞!可导致网站被控制、数据泄露!附解决方案
http://dy.163.com/v2/article/detail/F5FPIFRU0511Q1AF.html  !(http://dingyue.ws.126.net/2020/0216/125ec4c4p00q5rcrs0019d200ig009qg00ig009q.png)  来源:华为云  原文地址:https://w
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这