Use JS code to download files by clicking the button-JS Tutorial-php.cn

Use JS code to download files by clicking the button

高洛峰

Release： 2016-12-07 10:11:09

Original

2440 people have browsed it

Text

Sometimes we need to add a download button to the web page so that users can click to download the information on the page. So how can we achieve this function? There are two methods here:

Now you need to add a download button on the page, click the button to download the file.

Off topic, this download icon is referenced from font-awesome. When using it, first download the entire font-awesome folder, use Bower or download it yourself from the official website.

After placing the entire folder in the project file, introduce the css file on the page

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

Copy after login

You can start using the required icons on the page

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

Copy after login

1. Download the project The file

If you want to download an excel file template, you can first place the file under the project folder, and then add the onclick event to the page download button:

<i class="fa fa-download" aria-hidden="true" title="下载" onclick="window.open(&#39;file/user.xlsx&#39;)"></i>

Copy after login

After clicking the icon , the file will be downloaded automatically.

2. Send the request address to download the file

The return type of JQuery's ajax function is only xml, text, json, html and other types, and there is no "stream" type, so if we want to implement ajax download, we cannot use the corresponding ajax function. Download Document. But you can use js to generate a form, use this form to submit parameters, and return "stream" type data. During the implementation process, the page was not refreshed.

1) Get request

$(&#39;.download&#39;).click(function () {
var tt = new Date().getTime();
var url = &#39;http://192.168.1.231:8080/91survey/ws/excel/download&#39;;
/**
* 使用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();//表单提交
})

Copy after login

2) Post request

$(&#39;.download&#39;).click(function(){
var tt =newDate().getTime();
var url = restUrl +&#39;/excel/download?userId=&#39;+ 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();//表单提交
});

Copy after login

After completion, click the download icon on the page, and the file will be downloaded automatically.