Two ways to implement click-to-download files on HTML pages

Author：Eve Cole Update Time：2025-01-27 05:12:01

1. Use the <a> tag to complete

 <a href=/user/test/xxxx.txt download=filename.txt>Click to download</a>

In this way, when the user opens the browser and clicks the link, the file will be downloaded directly.

But there is a situation, such as txt, png, jpg and other files that the browser supports to open directly, will not perform the download task, but will open the file directly. In this case, you need to add an attribute download to the a tag;

The following is an example

Move to the <a> tag to display the file path, and complete the file path according to the path prompts.

 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> </head> <body> <a href=321.png download=test.png>Click to download</ a> </body> </html>

If you need to download images uploaded from a web page, you may use the following methods:

Get the host domain name:

location.hostname

Get the port number:

location.port

2. Use buttons to monitor

Button monitoring can be divided into two methods:

One is window.open()

 var $eleBtn1 = $(#btn1); var $eleBtn2 = $(#btn2); //A backend interface for downloading files is known: https://codeload.github.com/douban/douban-client/legacy. zip/master //Method 1: window.open() $eleBtn1.click(function(){ window.open(https://codeload.github.com/douban/douban-client/legacy.zip/master); });

The second is form submission

 //Method 2: Through form $eleBtn2.click(function(){ var $eleForm = $(<form method='get'></form>); $eleForm.attr(action,https://codeload.github .com/douban/douban-client/legacy.zip/master); $(document.body).append($eleForm); //Submit the form to download $eleForm.submit(); });

Summarize

The above are two ways to implement click-to-download files on HTML pages introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!