Use js to download files by clicking the button, and js to download files by clicking the button

Use js to download files by clicking the button, and js to download files by clicking the button

Sometimes we need to add a Download button on the webpage so that users can click it to download the information on the page. How can we implement the function? There are two methods:

 

 

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

The download icon is referenced. Font-awesomeAbove. In use,

• First, download the entire font-awesome folder, use bower or download it from the official website.
• After placing the entire folder in the project file, introduce the css file on the page.

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

 

• You can start to use the required icons on the page.

1 <I class = "fa-download" aria-hidden = "true" title = "download"> </I>

 

1. download files from the project

 

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

1 <I class = "fa-download" aria-hidden = "true" title = "download" onclick = "window. open ('file/user.xlsx') "> </I>

 

In this way, the file will be automatically downloaded after you click the icon. 2. the ajax function that sends the request address to download the file JQuery only returns the xml, text, json, html, and other types, and does not have the "stream" type. Therefore, we need to implement ajax download, the corresponding ajax function cannot be used for file download. However, you can use js to generate a form, use this form to submit parameters, and return "stream" type data. The page is not refreshed during implementation. 1) get request

1 $ ('. download'). click (function () {2 var tt = new Date (). getTime (); 3 var url =' http://192.168.1.231:8080/91survey/ws/excel/download '; 4 5/** 6 * use form to send requests 7*1. the method attribute is used to set the request type-post or get 8*2. the action attribute is used to set the Request Path. 9*10 */11 var form = $ ("<form>"); // defines a form 12 form. attr ("style", "display: none"); 13 form. attr ("target", ""); 14 form. attr ("method", "get"); // request type 15 form. attr ("action", url); // request address 16 $ ("body "). append (form); // place the form in the web. The 17 18/** 19 * input tag is mainly used to pass the request parameters: 20*21*1. the name attribute is the parameter name required to pass the request. 22*2. the value attribute is the parameter value required to pass the request. 23*24*3. when it is of the get type, the parameters required by the request are transmitted using the input tag. It is invalid to write them directly after the URL. 25*4. when the post type is used, the queryString parameter is directly written after the URL, the formData parameter uses the input label to pass 26 * The number of input tags 27*28 */29 var input1 =1 ("<input> "); 30 input1.attr ("type", "hidden"); 31 input1.attr ("name", "tt"); 32 input1.attr ("value", tt); 33 form. append (input1); 34 35 var input2 = $ ("<input>"); 36 input2.attr ("type", "hidden"); 37 input2.attr ("name ", "companyId"); 38 input2.attr ("value", companyId); 39 form. append (input2); 40 41 form. submit (); // form submission 42 })

 

2) post request

1 $ ('. download'). click (function () {2 var tt = newDate (). getTime (); 3 var url = restUrl +'/excel/download? UserId = '+ userId; 4 var form = $ ("<form>"); // define a form 5 form. attr ("style", "display: none"); 6 form. attr ("target", ""); 7 form. attr ("method", "post"); // request type 8 form. attr ("action", url); // request address 9 $ ("body "). append (form); // place the form in the web 10 11 var input1 =1 ("<input>"); 12 input1.attr ("type", "hidden "); 13 input1.attr ("name", "tt"); 14 input1.attr ("value", tt); 15 form. append (input1); 16 17 var input2 = $ ("<input>"); 18 input2.attr ("type", "hidden"); 19 input2.attr ("name ", "companyId"); 20 input2.attr ("value", companyId); 21 form. append (input2); 22 form. submit (); // form submission 23 });

 

After the download is complete, click the download icon on the page to automatically download the file. From Weizhi note (Wiz)