使用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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
bootstrap css样式之表单
Jan 19 Javascript
js实现3D图片展示效果
Mar 09 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
vuejs父子组件之间数据交互详解
Aug 09 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
js实现坦克移动小游戏
Oct 28 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
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
js中判断控件是否存在
2010/08/25 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python删除某个字符
2018/03/19 Python
Python应用库大全总结
2018/05/30 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Python中qutip用法示例详解
2020/10/02 Python
先进党支部事迹材料
2014/01/13 职场文书
大学生军训广播稿
2014/01/24 职场文书
媒体宣传策划方案
2014/05/25 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
董存瑞观后感
2015/06/11 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
婚庆答谢词大全
2015/09/29 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
导游词之日月潭
2019/11/05 职场文书