使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法:
现在需要在页面上添加一个下载按钮,点击按钮下载文件。
- 首先将 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.下载项目中的文件
<i class="fa fa-download" aria-hidden="true" title="下载" onclick="window.open('file/user.xlsx')"></i>
2.发送请求地址下载文件
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();//表单提交
});
使用js实现点击按钮下载文件的更多相关文章
- 使用JS代码实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- Js点击按钮下载文件到本地(兼容多浏览器)
实现点击 用纯 js(非jquery) 下载文件到本地 自己尝试,加网上找了好久未果,如: window.open(url) location.href=url form表单提交 ifr ...
- JS点击按钮下载文件
通过form表单提交: 由于ajax函数的返回类型只有xml.text.json.html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接 ...
- 页面点击按钮下载excel(原生js)
let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...
- js中使用showModelDialog中下载文件的时候,闪一下后无法下载
在js中使用showModelDialog中下载文件的时候,会因为showModelDialog自动设置target为_self导致下载文件“只会闪一下”就消失掉 在吧target设置为_blank后 ...
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- js实现点击按钮传值
js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- JS实现点击按钮,下载文件
PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
随机推荐
- SelectionSort,选择排序
/**算法:选择排序1,从当前未排序的正数中找一个最小的整数,将它放在已排序的整数列表的最后2.要点:选择排序选最小的,往左边选*/ #include <stdio.h>void Sele ...
- SQL IN ANY ,(all any) 区别
EXITS 和 IN 的区别: 从效率来看: 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; T1数据量小而T ...
- 教你几种在SQLServer中删除重复数据方法(转)
转载地址:http://www.jb51.net/article/22980.htm 方法一 复制代码 代码如下: declare @max integer,@id integer declare c ...
- Word中一些问题解决
word图片不显示或显示不全怎么办? http://jingyan.baidu.com/article/0f5fb099c5cb7a6d8334ea06.html
- hdu 4717(三分求极值)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4717 思路:三分时间求极小值. #include <iostream> #include ...
- Monitoring Processes with Supervisord
If you're interested in more of this type of content, check out the Servers for Hackers eBook! As so ...
- iOS 消息推送(APNs) 傻瓜式教程
也可以去我的简书页面查看这篇文章 首先: 1.做iOS消息推送需要真机测试 2.做iOS消息推送需要有付费的开发者账号 是否继续看帖? 先学习一下相关的知识吧! 因为中途可能会遇到一些问题,这篇文章或 ...
- CodeForces462 A. Appleman and Easy Task
A. Appleman and Easy Task time limit per test 1 second memory limit per test 256 megabytes input sta ...
- HDU5942 : Just a Math Problem
\[\begin{eqnarray*}ans&=&\sum_{i=1}^ng(i)\\&=&\sum_{i=1}^n\sum_{d|i}\mu^2(d)\\&= ...
- NOIP2013D1T3货车运输
题目链接:http://www.luogu.org/problem/show?pid=1967 数据:http://www.cnblogs.com/wanglichao/p/5592058.html ...