Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to set up the HTML page and click to download". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "HTML how to set up the page click download" bar!

Method 1: use tags

In our front-end knowledge, we know that tags are used to define hyperlinks from one page to another, and the most important attribute of the tag is the href attribute used to specify the target of the link. If we want to click download on the web page, we can add this line of code: click download so that users will download the file directly when they click on this link. However, for suffixes such as txt, png and jpg, opening the file directly in the browser will not perform the download, so we have added the download attribute to the code. Let's take a look at the example. The code is as follows:

A tag attribute implementation page download click download

We can view our download results in the browser. Of course, if we need to download the pictures uploaded from the web page, we may need to get the host domain name: location.hostname and the port number: location.port.

Method 2: use keystrokes to monitor

There are two types of listening words:

The first is window.open (). Let's take a look at the code:

Var $eleBtn1 = $("# btn1"); var $eleBtn2 = $("# btn2") / / know a backend interface 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");}))

In this method, we open the download in the web page through window.open () by using the known download port.

The second is form submission. Let's look at the code first:

/ / method 2: download $eleForm.submit () via 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). }); at this point, I believe you have a deeper understanding of "how to set up the page click to download", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.