使用JS代码实现点击按钮下载文件


Posted in Javascript onNovember 12, 2016

正文

有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法:

现在需要在页面上添加一个下载按钮,点击按钮下载文件。

题外话,这个下载图标是引用的 font-awesome 上面的。使用时,首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行。

将整个文件夹放在项目文件中之后,在页面上面引入css文件

<link href="libs/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

在页面上可以开始使用所需要的图标了

<i class="fa fa-download" aria-hidden="true" title="下载"></i>

1.下载项目中的文件

如果要下载的是一个excel文件模板,可以先将该文件放在项目文件夹下面,然后在页面下载按钮上加上onclick事件:

<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请求

$('.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请求

$('.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();//表单提交
});

完成后,在页面上面点击下载图标,文件就会自动下载了。

Javascript 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 #Javascript
javascript 实现动态侧边栏实例详解
Nov 11 #Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 #Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 #Javascript
JSON与XML的区别对比及案例应用
Nov 11 #Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 #Javascript
JS中数组重排序方法
Nov 11 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
sql注入与转义的php函数代码
2013/06/17 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
js 分栏效果实现代码
2009/08/29 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
详解python编译器和解释器的区别
2019/06/24 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
研究生自我鉴定范文
2013/10/30 职场文书
护士毕业生自荐信
2014/02/07 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
初中语文教师研修日志
2015/11/13 职场文书
大学班长竞选稿
2015/11/20 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
实现GO语言对数组切片去重
2022/04/20 Golang