有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法:
现在需要在页面上添加一个下载按钮,点击按钮下载文件。
题外话,这个下载图标是引用的 font-awesome 上面的。使用时,首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行。
将整个文件夹放在项目文件中之后,在页面上面引入css文件
1
|
<link href=
"libs/font-awesome-4.7.0/css/font-awesome.min.css"
type=
"text/css"
rel=
"stylesheet"
>
|
在页面上可以开始使用所需要的图标了
1
|
<i class=
"fa fa-download"
aria-hidden=
"true"
title=
"下载"
></i>
|
1.下载项目中的文件
如果要下载的是一个excel文件模板,可以先将该文件放在项目文件夹下面,然后在页面下载按钮上加上onclick事件:
1
|
<i class=
"fa fa-download"
aria-hidden=
"true"
title=
"下载"
onclick=
"window.open('file/user.xlsx')"
></i>
|
这样在点击图标之后,文件就会自动下载了。
2.发送请求地址下载文件
JQuery的ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。在实现过程中,页面也没有进行刷新。
1)get请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
$(
'.download'
).click(
function
() {
var
tt =
new
Date().getTime();
var
url =
'http://192.168.1.231:8080/91survey/ws/excel/download'
;
/**
* 使用form表单来发送请求
* 1.method属性用来设置请求的类型——post还是get
* 2.action属性用来设置请求路径。
*
*/
var
form=$(
"<form>"
);
//定义一个form表单
form.attr(
"style"
,
"display:none"
);
form.attr(
"target"
,
""
);
form.attr(
"method"
,
"get"
);
//请求类型
form.attr(
"action"
,url);
//请求地址
$(
"body"
).append(form);
//将表单放置在web中
/**
* input标签主要用来传递请求所需的参数:
*
* 1.name属性是传递请求所需的参数名.
* 2.value属性是传递请求所需的参数值.
*
* 3.当为get类型时,请求所需的参数用input标签来传递,直接写在URL后面是无效的。
* 4.当为post类型时,queryString参数直接写在URL后面,formData参数则用input标签传递
* 有多少数据则使用多少input标签
*
*/
var
input1=$(
"<input>"
);
input1.attr(
"type"
,
"hidden"
);
input1.attr(
"name"
,
"tt"
);
input1.attr(
"value"
,tt);
form.append(input1);
var
input2=$(
"<input>"
);
input2.attr(
"type"
,
"hidden"
);
input2.attr(
"name"
,
"companyId"
);
input2.attr(
"value"
,companyId);
form.append(input2);
form.submit();
//表单提交
})
|
2)post请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(
'.download'
).click(
function
(){
var
tt =newDate().getTime();
var
url = restUrl +
'/excel/download?userId='
+ userId;
var
form=$(
"<form>"
);
//定义一个form表单
form.attr(
"style"
,
"display:none"
);
form.attr(
"target"
,
""
);
form.attr(
"method"
,
"post"
);
//请求类型
form.attr(
"action"
,url);
//请求地址
$(
"body"
).append(form);
//将表单放置在web中
var
input1=$(
"<input>"
);
input1.attr(
"type"
,
"hidden"
);
input1.attr(
"name"
,
"tt"
);
input1.attr(
"value"
,tt);
form.append(input1);
var
input2=$(
"<input>"
);
input2.attr(
"type"
,
"hidden"
);
input2.attr(
"name"
,
"companyId"
);
input2.attr(
"value"
,companyId);
form.append(input2);
form.submit();
//表单提交
});
|
完成后,在页面上面点击下载图标,文件就会自动下载了。