精华内容
下载资源
问答
  • a标签下载属性
    千次阅读
    2017-11-20 15:12:21

    通过a标签来实现简单的点击下载。一般情况下我们使用a标签都是页面跳转之类的。但是a标签也可以实现文件类的下载(前提要下载的文件已经在服务器上或者相对路径下存在)
    正常情况下:

    <a href="文件的相对路径">测试</a>


    但是像上面这样的编写,遇到txt等文件,浏览器会直接将文件打开,而不是下载下来
    添加download属性:

     

    <a href="文件的相对路径" download>测试</a>


    添加以后你的文件就可以下载下来,而不是直接打开
    添加文件名称可以改变下载后文件的名称:

    <a href="文件的相对路径" download="文件名称">测试</a>



    注意:只有 Firefox 和 Chrome 支持 download 属性。

    更多相关内容
  • a标签常用属性——你是否都用过?

    千次阅读 多人点赞 2021-04-30 10:43:28
    a标签常用属性:target,href,download。

    内容介绍

      a标签常用属性:target,href,download。

    一、target属性

    属性值说明
    _top在整个窗口中打开
    _parent在父窗口打开
    _self默认,在当前框架下打开
    _blank在新窗口打开
    _framename在指定框架下打开

    二、href属性

    1、跳转
    • 使用绝对路径和相对路径跳转指定URL
    <!-- 使用绝对路径和相对路径跳转指定URL -->
    <li><a href="http://baidu.com">跳转网址 http://baidu.com</a></li>
    
    • 跳转至指定page页面(.html)
    <!-- 跳转至指定page页面(.html) -->
    <li><a href="/index.html">跳转指定页面 index.html</a></li>
    
    • 打开指定文件资源
    <!-- 打开指定文件资源 -->
    <li><a href="./image/1.jpg">打开指定文件资源 1.jpg</a></li>
    
    • 唤起QQ
    <!-- 唤起QQ -->
    <li><a href="tencent://message/?Menu=yes&uin=1434154130" data-type="qq">唤起QQ</a></li>
    
    2、假链接
    • 使用javascript:void(0);禁止跳转
    <!-- 使用javascript:void(0);禁止跳转 -->
    <li><a href="javascript:void(0);">使用javascript:void(0);禁止跳转</a></li>
    
    • 使用javascript:;禁止跳转
    <!-- 使用javascript:;禁止跳转 -->
    <li><a href="javascript:;">使用javascript:;禁止跳转</a></li>
    
    • 禁止默认跳转,执行自定义方法
    <!-- 禁止默认跳转,执行自定义方法 -->
    <li><a href="javascript:;" onclick="selfMethod()">禁止默认跳转,执行自定义方法</a></li>
    
    // 假链接,执行自定义方法
    function selfMethod() {
        console.log("点击a标签:", new Date());
    }
    
    3、群发短信、发送邮件、拨打电话等

    详情:使用 a标签 和 js 群发短信

    <!-- 拨打电话 -->
    <li><a href="sms:10086">给10086发短信</a></li>
    <!-- 发送短信 -->
    <li><a href="sms:10086?body=qxdy">给10086发短信,内容为"qxdy"</a></li>
    <!-- 群发短信 -->
    <li><a href="sms:10086,10000?body=qxdy">给10086和10000发短信,内容为"qxdy"</a></li>
    <!-- 发送邮件 -->
    <li><a href="mailto:10086@qq.com?subject=testSubject">给某人发邮件,内容为"testSubject"</a></li>
    <!-- 按钮同理 -->
    <li><button id="button">给10086打电话</button></li>
    
    // 点击按钮拨打电话
    let button = document.getElementById("button")
    button.onclick = function() {
        window.location.href = "tel:10086"
    }
    
    4、锚点跳转
    • 本页面锚点跳转
    <!-- 锚点跳转(本页面) -->
    <li><a href="#missionTable">锚点跳转——本页面跳转</a></li>
    
    • 其他页面锚点跳转
    <!-- 锚点跳转(其他页面) -->
    <li><a href="https://blog.csdn.net/cainiaoyihao_/article/details/115868578#htmltable">锚点跳转——其他页面跳转</a></li>
    
    5、打开本地资源或目录
    <!-- 打开本地资源 -->
    <!-- file 报错"Not allowed to load local resource:"html文件在本地直接打开 -->
    <li><a href="file:\\\C:\qingshan\1.jpg">打开本地资源</a></li>
    <li><a href="file:\\\C:\qingshan\">打开本地资源目录</a></li>
    

    在这里插入图片描述
    无法打开本地文件:HTML文件要在本地直接打开

    6、返回顶部
    <!-- # 返回顶部 -->
    <li><a href="#">网页返回顶部</a></li>
    

    三、download属性

    <!-- download属性 -->
    <!-- 不加download属性,默认打开预览,download值为文件重命名 -->
    <!-- 网络图片download无效,点击为预览 -->
    <li><a href="./image/本地上传.png" download="test">点击下载本地文件,重命名为"test"</a></li>
    

    四、完整代码

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>a标签常用属性</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                width: 100%;
                height: 100%;
            }
            
            a {
                text-decoration: none;
            }
            
            .cons {
                position: absolute;
                top: 10%;
                left: 50%;
                transform: translate(-50%, 0%);
            }
            
            .lists {
                min-width: 200px;
                max-width: 70vw;
                margin: 0 auto;
            }
            
            li {
                width: 100%;
                list-style: none;
                min-height: 30px;
                line-height: 20px;
                text-align: center;
                font-size: 16px;
                margin-bottom: 20px;
            }
            
            li:nth-of-type(2n+1) a {
                color: green;
            }
            
            li:nth-of-type(2n) a {
                color: red;
            }
            
            #button {
                padding: 5px 15px;
                border-radius: 5px;
            }
            
            h6 {
                height: 20px;
                line-height: 20px;
                text-align: center;
                margin-bottom: 15px;
                background-color: #ccc;
                border-style: groove;
                outline: 0.5px #999 dashed;
            }
            
            .missionTable {
                width: 70vw;
                font-size: 13px;
                margin: 0 auto;
                margin-bottom: 20px;
                table-layout: fixed;
                border-bottom: none;
                border: 0.3px solid #999;
            }
            
            caption {
                height: 30px;
                line-height: 30px;
                border: 1px dashed #999;
                background-color: #ddd;
            }
            
            .missionTable,
            thead,
            th,
            tr,
            td {
                text-align: center;
                border-collapse: collapse;
            }
            
            .missionTable thead {
                border-radius: 6px 6px 0px 0px;
                border-bottom: 1px solid #D5D5D5;
            }
            
            .missionTable th {
                height: 25px;
                line-height: 25px;
                font-size: 14px;
                font-family: PingFang SC;
                color: #222222;
                border: 1px solid #999;
                background: #FCFDFD;
            }
            
            tbody tr {
                height: 25px;
                line-height: 25px;
                background: #FFFFFF;
                border-bottom: 0.4px solid #999;
            }
            
            tbody td {
                border-right: 1px solid #999;
            }
        </style>
    </head>
    
    <body>
        <div class="cons">
            <ul class="lists">
                <!-- target属性 -->
                <!-- _top :在整个窗口中打开-->
                <!-- _blank :在新窗口打开-->
                <!-- _self :默认,在当前框架下打开-->
                <!-- _parent :在父窗口打开-->
                <!-- _framename :在指定框架下打开-->
                <h6>target属性</h6>
                <table cellpadding="0" id="missionTable" class="missionTable">
                    <caption>target属性</caption>
                    <thead>
                        <th style="width:35%;">属性值</th>
                        <th style="width:65%;">说明</th>
                    </thead>
                    <tbody id="missionTables">
                        <tr>
                            <td>_top</td>
                            <td>在整个窗口中打开</td>
                        </tr>
                        <tr>
                            <td>_blank</td>
                            <td>在新窗口打开</td>
                        </tr>
                        <tr>
                            <td>_self</td>
                            <td>默认,在当前框架下打开</td>
                        </tr>
                        <tr>
                            <td>_parent</td>
                            <td>在父窗口打开</td>
                        </tr>
                        <tr>
                            <td>_framename</td>
                            <td>在指定框架下打开</td>
                        </tr>
                    </tbody>
                </table>
                <!-- href属性 -->
                <h6>href属性——跳转</h6>
                <!-- 跳转 -->
                <!-- 使用绝对路径和相对路径跳转指定URL -->
                <li><a href="http://baidu.com">跳转网址 http://baidu.com</a></li>
                <!-- 跳转至指定page页面(.html) -->
                <li><a href="/index.html">跳转指定页面 index.html</a></li>
                <!-- 打开指定文件资源 -->
                <li><a href="./image/1.jpg">打开指定文件资源 1.jpg</a></li>
                <!-- 唤起QQ -->
                <li><a href="tencent://message/?Menu=yes&uin=1434154130" data-type="qq">唤起QQ</a></li>
                <h6>href属性——假链接</h6>
                <!-- 假链接 -->
                <!-- 使用javascript:void(0);禁止跳转 -->
                <li><a href="javascript:void(0);">使用javascript:void(0);禁止跳转</a></li>
                <!-- 使用javascript:;禁止跳转 -->
                <li><a href="javascript:;">使用javascript:;禁止跳转</a></li>
                <!-- 禁止默认跳转,执行自定义方法 -->
                <li><a href="javascript:;" onclick="selfMethod()">禁止默认跳转,执行自定义方法</a></li>
                <h6>href属性——锚点跳转</h6>
                <!-- 锚点跳转(本页面) -->
                <li><a href="#missionTable">锚点跳转——本页面跳转</a></li>
                <!-- 锚点跳转(其他页面) -->
                <li><a href="https://blog.csdn.net/cainiaoyihao_/article/details/115868578#htmltable">锚点跳转——其他页面跳转</a></li>
                <h6>href属性——打开本地资源或目录</h6>
                <!-- 打开本地资源 -->
                <!-- file 报错"Not allowed to load local resource:"html文件在本地直接打开 -->
                <li><a href="file:\\\C:\qingshan\1.jpg">打开本地资源</a></li>
                <li><a href="file:\\\C:\qingshan\">打开本地资源目录</a></li>
                <h6>download属性</h6>
                <!-- download属性 -->
                <!-- 不加download属性,默认打开预览,download值为文件重命名 -->
                <!-- 网络图片download无效,点击为预览 -->
                <li><a href="./image/本地上传.png" download="test">点击下载本地文件,重命名为"test"</a></li>
                <h6>跳转调用功能</h6>
                <!-- 拨打电话 -->
                <li><a href="sms:10086">给10086发短信</a></li>
                <!-- 发送短信 -->
                <li><a href="sms:10086?body=qxdy">给10086发短信,内容为"qxdy"</a></li>
                <!-- 群发短信 -->
                <li><a href="sms:10086,10000?body=qxdy">给10086和10000发短信,内容为"qxdy"</a></li>
                <!-- 发送邮件 -->
                <li><a href="mailto:10086@qq.com?subject=testSubject">给某人发邮件,内容为"testSubject"</a></li>
                <!-- 按钮同理 -->
                <li><button id="button">给10086打电话</button></li>
                <h6>返回顶部</h6>
                <!-- # 返回顶部 -->
                <li><a href="#">网页返回顶部</a></li>
            </ul>
    
        </div>
        <script>
            // 点击按钮拨打电话
            let button = document.getElementById("button")
            button.onclick = function() {
                window.location.href = "tel:10086"
            }
    
            // 假链接,执行自定义方法
            function selfMethod() {
                console.log("点击a标签:", new Date());
            }
        </script>
    </body>
    
    </html>
    

    五、预览

    在这里插入图片描述


    标签:a标签,href,download,target


    更多演示案例,查看 案例演示


    欢迎评论留言!

    展开全文
  • a标签属性

    千次阅读 2021-07-26 10:43:40
    a标签属性 1. a 标签的作用 就是用于控制页面之间跳转 2. a 标签的格式 <a href="跳转的目标界面">展示内容</a> 3. 注意点 a 标签不仅可以让文字可以点击。还有图片也可以点击跳转 一个a标签必须...

    a标签及属性

    1. a 标签的作用

    就是用于控制页面之间跳转

    2. a 标签的格式

     <a href="跳转的目标界面">展示内容</a>
    

    3. 注意点

    • a 标签不仅可以让文字可以点击。还有图片也可以点击跳转
    • 一个a标签必须有href属性
    • 跳转的是地址,地址前要加上http://或者https://
    <a href="http://news.baidu.com/">百度新闻</a>
    <br><br><br>
    
    <a href="https://baike.baidu.com/item/%E8%82%96%E6%88%98/18866899?fr=aladdin">
        <img src="../photo/sean/gg2.jpg" width="100"></a>
        <a href="a.href标签.html" tagert="_self">返回</a>
    </center>
    

    4. a标签的属性

    • a标签中有一个target属性,这个属性就是用来控制如何跳转的。
    • self: 用于当前页面跳转。
    • blank:用于在新的页面跳转。
    • a标签中还有一个title属性,和img中的提title一样,都是用来控制鼠标悬停显示的提示文本。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <a href="test.html" tagert="_self"title="点击就能看到神奇的东西">idol</a>
    <a href="a标签.html" tagert="_blank"title="点击就能看到神奇的东西">点我</a>
    </body>
    </html>
    
    展开全文
  • href和download是我们下载文件所需要的两个属性: href:是指这个超链接指向的url地址; download:该属性是HTML5新增的属性,此属性是让我们的浏览器下载URL而不是跳转到URL所指向的内容,所以若我们需要下载文件...

    HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

    href和download是我们下载文件所需要的两个属性:

    • href:是指这个超链接指向的url地址
    • download:该属性是HTML5新增的属性,此属性是让我们的浏览器下载URL而不是跳转到URL所指向的内容,所以若我们需要下载文件到本地,需要设置这个属性值。

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>a标签的download属性</title>
    </head>
    <body>
        <div>
            <p><a href="./images/1.png" download="xiazai">下载图片</a></p>
        </div>
    </body>
    </html>
    

    点击就可以进行图片的下载

    检测当前浏览器是否支持download属性:

    let canSupportDownload = 'download' in document.createElement('a');
    

    目前我们可以在浏览器预览的文件还有pdf、ppt、txt等,倘若能够通过a标签直接下载到本地,这利于用户也利于开发,也不需要server再来处理文件下载。但是现目前的兼容性还是一个大问题。

    关于浏览器相关的兼容性可以去看一下这篇文章a标签的download属性简介

    展开全文
  • 所以是异步行为,这时候不能直接给a标签href属性赋值,因为点击a标签的时候会同时执行onClick方法和href属性,所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载文件的操作。 1、Table中,在...
  • a标签download属性

    千次阅读 2020-04-14 17:14:31
    download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,download属性下载后的文件名 用法1:下载该本地图片,并默认命名 <a href="../../assets/img/213.png" download ...
  • 在使用a标签下载文件时,download属性可以更改下载的文件名,但是当a标签下载链接跨域时,download属性将不会生效,原因是浏览器无法获取到文件,不能对他进行更改 解决办法 将文件使用get请求获取到,转为blob...
  • Html a标签 download属性失效原因

    千次阅读 2021-06-11 08:06:53
    HTML 4.01 与 HTML 5 之间的差异在 HTML5 中,download 属性标签的新属性。因此,download 是属于HTML5的新属性,失效原因分析如下:1、没有声明html5,需要再html文件头声明声明必须是 HTML 文档的第一行,位于 ...
  • a标签的target属性

    万次阅读 2019-10-31 17:00:17
    a标签的target属性前端a标签最重要的属性是href属性,实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制 前端a标签最重要的属性是href属性,实现页面的跳转。但是在当前页面显示还是在新...
  • 1.描述 环境:webstorm vue.js 2.问题:下载未发现文件 3. 原因: (1)文件位置没有放对 (2)文件名字包含中文 4.解决 (1)把文件放到static目录(静态资源目录)...(2)上图:【看文件目录和a标签就行了】 ...
  • a标签download属性不起作用

    万次阅读 多人点赞 2019-01-18 17:05:11
    首先要明白的是,download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,如果填写指就会更改你的下载名称,比如: <a href="/images/a.exe" download>点击下载<...
  • a 标签 download 属性不起作用,或者下载的图片无法查看 问题描述 download 是 a 标签 html5 的新属性,可以点击下载文件,初次使用,经常会出现无法点击的情况,可能有以下原因,排除下: 解决方案 必须设置 ...
  • a标签download属性修改文件名失效

    万次阅读 2018-10-17 16:08:43
    &lt;a href="'+fileurl+'" download="'+filename+'"&gt; fileName为下载文件要修改的名字 ...在谷歌和火狐浏览器a标签download属性修改文件名失效是因为网络原因:注意访...
  • a标签下载图片

    千次阅读 2022-01-24 11:35:18
    a标签能用做下载图片功能,主要是标签有download属性,加上download后会指示浏览器下载而不是导航。但是这个属性是HTML5属性,仅兼容版本较高的浏览器,兼容性如下: 可以看到,download属性完全不兼容ie的,所以...
  • **在web项目中a标签的download属性下载文件失败,找不到文件。** 在项目里用了a标签的download属性下载图片,本来好好的,突然Bug,改了好久,找不到原因。起初认为是无法获取到地址。但用了 String path = request...
  • a标签 rel属性

    千次阅读 2018-12-10 14:28:15
    a标签常用rel属性 rel=’external’ 此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。 为什么要这样写呢?因为有些网站因为是采用严格的DOCTYPE声名的,如果你在网页源码中的...
  • 众所周知,a标签加download属性可以实现大部分文件的点击直接下载(如zip),但是部分文件(如jpg,pdf等浏览器可以直接识别的文件)会直接打开,而不是下载。 以下提供两种实践过并且有效的方法,仅供参考。 一、...
  • 设置a标签属性样式

    千次阅读 2019-12-22 23:15:01
    设置a标签属性样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; ...
  • a标签有哪些属性

    万次阅读 2019-04-03 08:50:19
    a标签属性: download:规定被下载的超链接目标。 href:规定链接指向的页面的 URL。 hreflang:规定被链接文档的语言。 media:规定被链接文档是为何种媒介/设备优化的。 rel:规定当前文档与被链接文档...
  • a标签download属性修改文件名

    千次阅读 2020-01-16 14:57:20
    静态文件下载时,可通过downloads属性修改文件名,如下所述: ...注意事项:a标签download属性只支持谷歌和火狐浏览器,不支持IE(IE不支持html5 新特性a标签download属性)。同时访问的域名与a标签内href的域...
  • 在谷歌和火狐浏览器a标签download属性修改文件名失效的原因:不同源,访问的域名和href的域名要一致。 解决方法: 使用HTML5 Blob实现文件下载,先把文件以bobl的形式下载到当前页面,再创建a标签。 <a click=...
  • 利用a标签下载图片

    千次阅读 2020-07-20 19:31:28
    其实就是运用a标签的download属性,href就是图片的地址 import React, { useState } from 'react' import './index.scss' import fly from '../../api/flyio' /** * type, 7:职位详情的分享 */ export default...
  • HTML【a标签属性大全!!!

    千次阅读 2020-05-22 09:38:41
    指定下载链接 href URL 规定链接的目标 URL。 hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用。 media media_query 规定目标 URL 的媒介类型。默认值:all...
  • 问题描述:前段时间一直想使用前端的a标签实现文件下载,使用的a标签的download属性就能实现。可是FTP服务器的图片还是一直只能预览无法直接下载。 #使用的地址是直接使用的IP端口的,原因就出在这里:当请求...
  • a标签的href属性长度限制

    千次阅读 2018-02-28 09:35:10
    a标签的href属性长度限制 ...(通过a标签的download属性和href属性实现下载) 然后google了一下, 第一个回答: Is there a way to get around the limit? Very hardly. It is even pro...
  • 解决a标签download属性无效问题

    万次阅读 2019-05-21 12:01:50
    起初遇到这个问题是因为在QQ浏览器中,a链接无法下载浏览器插件(.crx文件),既没有弹出下载窗口,在下载记录里面也找不到下载文件,后面就给a标签添加了这个download属性。 download属性的作用是强制弹出下载窗口,...
  • a标签下载pdf文件

    千次阅读 2021-10-11 10:22:19
    通过a标签的download属性可以实现下载pdf文件,不过有一个弊端:网站和pdf文件必须在同一域名下才可行,不然就是先打开一个新标签预览,然后点击下载按钮进行下载
  • a标签下载文件

    千次阅读 2021-01-27 16:39:42
    a标签下载文件 问题记录: 点击时打开了文件,不管是pdf还是jpg,不管target是blank还是self,想要实现点击时直接在当前页面下载文件。 解决方案: 在href后拼接"?response-content-type=application/octet-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 718,048
精华内容 287,219
关键字:

a标签下载属性