Use JS code to achieve click button Download file _javascript tips

Body

Sometimes we need to add a download button on the page, so that users can click to download the information on the page, then how to achieve the function? Here are two ways:

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

On the digression, this download icon is referenced by the font-awesome above. When using, first will font-awesome the entire folder download down, uses bower or is oneself goes to the official net surface downloading all line.

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" >

On the page you can start using the icon you want.

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

1. Download the files in the project

If you are downloading 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= "Download" onclick= "window.open (' file/user.xlsx ')" ></i>

This way, after clicking on the icon, the file is automatically downloaded.

2. Send Request address download file

jquery Ajax functions of the return type only XML, text, JSON, HTML and other types, there is no "stream" type, so we want to implement Ajax download, can not use the corresponding Ajax functions to download files. But you can use JS to generate a form, use this form to submit parameters, and return the "stream" type of data. In the implementation process, the page is not refreshed.

1) Get request

 $ ('. Download '). Click (function () {var tt = new Date (). GetTime (); var url = ' http://192.16
8.1.231:8080/91survey/ws/excel/download ';
/** * Use form form to send request * The 1.method property is used to set the type of the request--post or get * 2.action property to set the request path.
* */var form=$ ("<form>");//define a form form.attr ("style", "Display:none");
Form.attr ("Target", ""); Form.attr ("Method", "get"); Request Type Form.attr ("action", URL);
Request address $ ("body"). Append (form),//place the form in the Web/** * Input label is used primarily to pass the required parameters for the request: * * 1.name property is the name of the parameter required to pass the request.
* The 2.value property is the parameter value required to pass the request.
* 3. When a get type, the requested parameters are passed in the input tag, which is not valid after the URL is written directly.
* 4. When the post type, the QueryString parameter is written directly behind the URL, the Formdata parameter is passed with the input label * How much data is used the input label * * * * * * * ("<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 ();//Form Submit}) 

2) Post request

$ ('. Download '). Click (function () {
var tt =newdate (). GetTime ();
var url = resturl + '/excel/download?userid= ' + userId;
var form=$ ("<form>");//define a form
form.attr ("style", "Display:none");
Form.attr ("Target", "");
Form.attr ("Method", "post");//Request Type
form.attr ("action", URL);//Request Address
$ ("Body"). Append (form)//To place the form in the 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 ()//form submission
});

When finished, click on the download icon on the page and the file will be downloaded automatically.