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
Vue3 compilation process-source code analysis
Preface: Vue3 has been released for a long time. ...
Nginx reverse proxy learning example tutorial
Table of contents 1. Reverse proxy preparation 1....
Implementation of installing Docker in win10 environment
1. Enter the Docker official website First, go to...
The difference between storing full-width characters and half-width characters in MySQL
Unfortunately, the MYSQL_DATA_TRUNCATED error occ...
Comprehensive understanding of HTML basic structure
Introduction to HTML HyperText Markup Language: H...
mysql executes sql file and reports error Error: Unknown storage engine'InnoDB' solution
Find the problem I recently encountered a problem...
Vue.js performance optimization N tips (worth collecting)
Table of contents Functionalcomponents Childcompo...
How to open a page in an iframe
Solution: Just set the link's target attribute...
Improving the effect of hyperlinks in web design and production
Hyperlinks enable people to jump instantly from pa...
Detailed explanation of the steps to build a Vue project with Vue-cli
First you need to install Vue-cli: npm install -g...
Webpack loads css files and its configuration method
webpack loads css files and its configuration Aft...
Tomcat garbled characters in the console in IDEA and how to set IDEA encoding to UTF-8
1. First of all, we need to distinguish between t...
The best solution for resetting the root password of MySQL 8.0.23
This method was edited on February 7, 2021. The v...
Mysql classic high-level/command line operation (quick) (recommended)
Since I need to learn how to build servers and da...
Tutorial on installing and changing the root password of MySQL 5.7.20 decompressed version
1. Download MySQL Archive (decompressed version) ...