Get the App
SLTechnology News&Howtos  ›  Development  › 

How to download files by clicking on HTML page

Shulou Source: shulou.com Published: 2022-06-01 04:48:24 09月26日 Update

Today, I would like to share with you how to click on the HTML page to download the relevant knowledge of the file, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

1. Use tags to do this

Click to download

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

However, there is a situation, such as txt,png,jpg and other browsers that support direct opening of the file will not perform the download task, but will directly open the file. At this time, you need to add an attribute "download" to the a tag.

The following is an example

Move to the label to display the file path, and complete the file path according to the path prompt

Click to download

The following methods may be used to download pictures uploaded from a web page

Get the host domain name:

Location.hostname

Get the port number:

Location.port

two。 Use buttons to monitor

Button monitoring can be divided into two methods.

One is window.open ()

Var$eleBtn1=$ ("# btn1")

Var$eleBtn2=$ ("# btn2")

/ / known a backend API for downloading files: 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=$ ("")

EleForm.attr ("action", "https://codeload.github.com/douban/douban-client/legacy.zip/master");"

(document.body) .append ($eleForm)

/ / submit the form to download

$eleForm.submit ()

})

These are all the contents of the article "how to click on the HTML page to download the file". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Tags: File method tag knowledge article path page content button time browser form browse monitor different large host task example slogan Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Information NVidia macOS MariaDB Redmi