使用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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
ant design vue datepicker日期选择器中文化操作
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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP 开源AJAX框架14种
2009/08/24 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python实现Const详解
2015/01/27 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python切片操作深入详解
2018/07/27 Python
基于python实现模拟数据结构模型
2020/06/12 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
.net笔试题
2014/03/03 面试题
广州品高软件.net笔面试题目
2012/04/18 面试题
项目经理岗位职责
2013/11/11 职场文书
幼师自我鉴定
2014/02/01 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
个人收入证明模板
2014/09/18 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
redis 查看所有的key方式
2021/05/07 Redis
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android