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
Detailed explanation of how Angular handles unexpected exception errors
Written in front No matter how well the code is w...
Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7
Related reading: MySQL8.0.20 installation tutoria...
How to use Baidu Map API in vue project
Table of contents 1. Register an account on Baidu...
How to install Android x86 in vmware virtual machine
Sometimes you just want to test an app but don’t ...
Detailed explanation of the implementation principle of ACID transaction in Mysql
introduction As usual, let's start with a sce...
Steps to initialize the password after the first successful installation of MySQL
Unzip the file into a directory This is the direc...
Summary of pitfalls encountered in installing mysql and mysqlclient on centos7
1. Add MySQL Yum repository MySQL official websit...
HTML simple shopping quantity applet
This article shares a simple HTML shopping quanti...
How to replace all tags in html text
(?i) means do not match case. Replace all uppercas...
JavaScript implements a box that follows the mouse movement
This article shares the specific code of JavaScri...
A brief discussion on the matching rules of host and user when Mysql connects to the database
--When connecting to the database, the matching r...
JavaScript implements product details of e-commerce platform
This article shares a common example of viewing p...
Detailed explanation of Linux redirection usage
I believe that everyone needs to copy and paste d...
MySQL statement arrangement and summary introduction
SQL (Structured Query Language) statement, that i...
Detailed explanation of putting common nginx commands into shell scripts
1. Create a folder to store nginx shell scripts /...