使用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 三种创建对象的方法
Oct 16 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
jquery validate demo 基础
Oct 29 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
微信小程序实现底部导航
Nov 05 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
微信小程序实现列表左右滑动
Nov 19 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php数组(array)输出的三种形式详解
2013/06/05 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
TensorFlow的权值更新方法
2018/06/14 Python
python实现音乐下载的统计
2018/06/20 Python
详解python3中的真值测试
2018/08/13 Python
Python中一般处理中文的几种方法
2019/03/06 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
8种常用的Python工具
2020/08/05 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
亲子读书活动方案
2014/02/22 职场文书
司机职责范本
2014/03/08 职场文书
男女朋友协议书
2014/04/23 职场文书
违章停车检讨书
2014/10/21 职场文书
党员倡议书
2015/01/19 职场文书
齐云山导游词
2015/02/06 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
MySql数据库 查询时间序列间隔
2022/05/11 MySQL