Two ways to implement HTML page click download file
|
1. Use the <a> tag to complete <a href="/user/test/xxxx.txt" download="file name.txt">Click to download</a> In this way, when the user opens the browser and clicks the link, the file will be downloaded directly. However, there is a situation where, for example, files such as txt, png, jpg, etc. that the browser supports opening directly will not execute the download task, but will directly open the file. In this case, you need to add an attribute "download" to the a tag; The following is an example Move to the tag <a> to display the file path and complete the file path according to the path prompt.
<!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 for monitoring Button monitoring can be divided into two methods. One is window.open()
var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2");
//A known 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");
});Second, 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 methods of implementing click-to-download files on HTML pages that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Let's learn about the MySQL storage engine
>>: Detailed explanation of the usage of the rare tags fieldset and legend
Recommend
Migrate virtual machines between VMware Workstation and vSphere (picture and text)
1. Change the virtual machine hardware version in...
VUE implements a Flappy Bird game sample code
Flappy Bird is a very simple little game that eve...
jQuery implements the function of disabling the control button of sending verification code
Required effect: After clicking to send the verif...
Let's learn about JavaScript object-oriented
Table of contents JavaScript prototype chain Obje...
Summary of several principles that should be followed in HTML page output
1. DOCTYPE is indispensable. The browser determin...
Detailed explanation of scheduled tasks for ordinary users in Linux
Preface Ordinary users define crontab scheduled t...
CSS description of the implementation code for displaying text at the end of the horizontal progress bar
Problem Description I want to achieve the followi...
How to convert JavaScript array into tree structure
1. Demand The backend provides such data for the ...
Example analysis of mysql stored procedures that trigger error conditions in stored procedures (SIGNAL and RESIGNAL statements)
This article uses examples to illustrate the erro...
Vue uses Split to encapsulate the universal drag and slide partition panel component
Table of contents Preface start Basic layout Data...
Full steps to create a password generator using Node.js
Table of contents 1. Preparation 2. Writing comma...
Common problems in implementing the progress bar function of vue Nprogress
NProgress is the progress bar that appears at the...
Using JS to implement a simple calculator
Use JS to complete a simple calculator for your r...
CSS pixels and solutions to different mobile screen adaptation issues
Pixel Resolution What we usually call monitor res...
Bootstrap 3.0 study notes CSS related supplement
The main contents of this article are as follows:...