• HTML页面点击下载文件的两种实现方法


    1.使用<a>标签来完成

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

    这样当用户打开浏览器点击链接的时候就会直接下载文件。

    但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;

    以下为例子

    移到标签<a>标签上可以显示文件路径,根据路径提示进行文件路径的补全

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

    若需从网页上传的图片中进行下载  可能会用到以下方法

    获取主机域名:

    location.hostname

    获取端口号:

    location.port

    2.使用按钮进行监听

    按钮监听又可以分为两种方法,

    一是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");  
            });  

    二是表单提交

    //方法二:通过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);  
                //提交表单,实现下载  
                $eleForm.submit();  
            });  
  • 相关阅读:
    通过网页源代码看“饭否”的网站架构
    SD2.0课程等待时候的摘抄
    SD2.0阿里妈妈的研发过程
    转:编程8字专静谦筹悟慎透恒
    SD2.0第一天总体印象
    SD2.0《Web2.0网站性能调优实践》貌似是抄袭的文章
    SD2.02个课合成一个课
    SD2.0第2天总体印象
    variant
    [zz]C++程序员的阅读清单
  • 原文地址:https://www.cnblogs.com/xaun/p/13559968.html
Copyright © 2020-2023  润新知