Home > Article > Web Front-end > Two ways to implement click-to-download files on HTML pages

Two ways to implement click-to-download files on HTML pages

不言Original: 2018-06-05 11:51:504080browse

This article mainly introduces two ways to implement click-to-download files on HTML pages. Friends in need can refer to

##1. Use the 3499910bf9dac5ae3c52d5ede7383485 tag to complete

<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>

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

But there is a situation, such as txt, png, jpg and other files that the browser supports direct opening will not perform the download task, but will open the file directly. At this time, you need to add an a tag Attribute "download";

The following is an example

Move to the label 3499910bf9dac5ae3c52d5ede7383485 label to display the file path, follow the path prompts Completion of the file path

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
    </head>  
    <body>  
        <a href="321.png" download="test.png">点击下载</a>    
    </body>  
</html>

If you need to download from the image uploaded on the web page, you may use the following method

to obtain the host domain name:

location.hostname

Get the port number:

location.port

2. Use the button to listen

Button monitoring can be divided into two methods,

One is window.open()

var $eleBtn1 = $("#btn1");  
        var $eleBtn2 = $("#btn2");  
        //已知一个下载文件的后端接口：https://codeload.github.com/douban/douban-client/legacy.zip/master  
        //方法一：window.open()  
        $eleBtn1.click(function(){  
            window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");  
        });

The second is form submission

//方法二：通过form  
        $eleBtn2.click(function(){  
            var $eleForm = $("<form method=&#39;get&#39;></form>");  
            $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");  
            $(document.body).append($eleForm);  
            //提交表单，实现下载  
            $eleForm.submit();  
        });

Related recommendations:

Introduction to the use of anchor points (named anchors) in html web pages

The above is the detailed content of Two ways to implement click-to-download files on HTML pages. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Examples of dynamic text effects using pure CSSNext article：Examples of dynamic text effects using pure CSS

See more

Two ways to implement click-to-download files on HTML pages

Related articles