超链接 a 标签主要有以下功能:

跳转到其他页面

 <a href="https://www.baidu.com/" target="_blank" >百度</a>
  • href:目标页面的 url 地址或同网站的其他页面地址,如 detail.html
  • target:打开目标页面的方式
    • _self:在同一个网页中显示(默认值)
    • _blank:在新的窗口中打开【常用】
    • _parent:在父窗口中显示
    • _top:在顶级窗口中显示

锚点 – 页内滚动

回到页面顶部

<a href="#">回到顶部</a>

滚动到指定元素

<a href="#title2">页内滚动到标题2</a>
  • href:# + 指定元素的 id 或 name

在这里插入图片描述

<template>
  <div class="page">
    <h1>标题1</h1>
    <p>段落1</p>
    <p>段落2</p>

    <h1 id="title2">标题2</h1>

    <div class="menuBox">
      <a href="#title2">页内滚动到标题2</a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  height: 2000px;
}
.menuBox {
  position: fixed;
  right: 20px;
  bottom: 20px;
}
</style>

跳转到其他页面并滚动到指定元素

<a href="index.html#menu">打开首页,并滚动到菜单</a>

刷新页面

<a href="">刷新页面</a>
  • href 为空

下载文件

<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
  • href:目标文件的 url 地址
  • download:指定下载后文件的名称,若无,则使用默认文件名
txt、png、jpg 等浏览器支持直接打开的文件必须添加 download 属性,否则不会执行下载任务,而会直接打开文件。

访问接口,返回文件流进行下载时,也会用到 !

// 根据接口返回的文件流数据 data, 创建 blob 对象
const blob = new Blob([data], { type: headers['content-type'] })
// 生成指向 blob 对象的临时 URL
const downUrl = window.URL.createObjectURL(blob)
// 创建 a 链接
const dom_a = document.createElement('a')
// a 链接的 href 属性为 blob 对象的临时 URL
dom_a.href = downUrl
// a 链接的 download 属性为进行URL解码的 fileName
dom_a.download = decodeURIComponent(fileName)
// a 链接的 display 样式为 none,避免在页面上显示
dom_a.style.display = 'none'
// 将 a 链接添加到 body 标签中
document.body.appendChild(dom_a)
// 点击 a 链接,触发文件的下载
dom_a.click()
// 将 a 链接从父标签(此处为 body )中移除
dom_a.parentNode.removeChild(dom_a)
// 清除指向 blob 对象的临时 URL
window.URL.revokeObjectURL(url)

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部