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

Source: Internet
Author: User

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)



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.