请选择 进入手机版 | 继续访问电脑版

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
z记录 Z记录 网站编辑 查看内容

HTML点击按钮下载文件的代码

2024-10-22 23:14| 发布者: zouyang5| 查看: 68| 评论: 0|来自: Z记录

摘要: html中最简单的一个下载按钮,用于随时的复制粘贴用 文件下载示例 点击下载文件function downloadFile() {// 创建一个虚拟的链接元素var downloadLink = document.createElement('a');downloadLink.href = '..... . ...
第一种:最普通简单的下载按钮

html中最简单的一个下载按钮,用于随时的复制粘贴用

<!DOCTYPE html>
<html>
<head><title>文件下载示例</title>
</head>
<body><button onclick="downloadFile()">点击下载文件</button><script>function downloadFile() {// 创建一个虚拟的链接元素var downloadLink = document.createElement('a');downloadLink.href = 'path/to/your/file';  // 替换为你要下载的文件路径// 设置下载文件的名称downloadLink.download = 'filename.ext';  // 替换为你要下载的文件名称(包括扩展名)// 触发点击事件进行下载downloadLink.click();}</script>
</body>
</html>

上面包括了整个网页页面,其实需要用到的也只有中间这一句:

<button onclick="downloadFile()">点击下载文件</button><script>function downloadFile() </script>

效果如下:

在HTML点击下载网页代码是非常实用的功能,如果您有需要,可以尝试使用这一句代码来实现下载链接,也可以加入到不同的应用场景中:

<button onclick="downloadFile()">点击下载代码</button><script>function downloadFile() {var content = document.documentElement.outerHTML;var fileName = "myPage.html";var a = document.createElement("a");var blob = new Blob([content], {type: "text/html;charset=utf-8"});a.href = URL.createObjectURL(blob);a.download = fileName;a.click();}</script>

以上代码包括一个下载按钮和一个Javascript脚本。当我们点击按钮时,脚本将获取整个HTML内容,并将其转化为Blob对象,随后将创建一个指向Blob对象的下载链接并自动点击, 使用以上代码,我们可以轻松地让他人下载我们的代码,方便分享和学习。

下面再来几个转来的不同效果的按钮:

<button class="shadowBtn">影子按钮</button>
<button class="rotateBtn">旋转按钮</button>
<button class="gradientBtn">渐变按钮</button>

使用方法都一样!

------------------------------------------------------------------------

第二种常见的下载按钮

再来个现在比较流行的下载方案:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<style>
    .tp-down-box{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    .down-btn {
      letter-spacing: 0.1em;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      line-height: 45px;
      width: 23%;
      max-width: 160px;
      text-decoration: none;
      text-transform: uppercase;
      margin: 5px;
    }
    .down-btn:hover {
      text-decoration: none;
    }
    .tp-down-btn {
      --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
      display: var(--uismLinkDisplay);
      color: #000;
      border: 2px solid #000;
      border-radius: 5px;
      position: relative;
      transition-duration: 0.4s;
      overflow: hidden;
      text-align: center;
    }
    .tp-down-btn::before,
    .tp-down-btn span{
      margin: 0 auto;
      transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
      transition-duration: 0.4s;
    }
    .tp-down-btn:hover{
      background-color: #000;
    }
    .tp-down-btn:hover span{
      -webkit-transform: translateY(-400%) scale(-0.1,20);
      transform: translateY(-400%) scale(-0.1,20);
    }
    .tp-down-btn::before{
      content: attr(data-sm-link-text);
      color: #FFF;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      -webkit-transform: translateY(500%) scale(-0.1,20);
      transform: translateY(500%) scale(-0.1,20);
    }
    .tp-down-btn:hover::before{
        letter-spacing: 0.05em;
        -webkit-transform: translateY(0) scale(1,1);
        transform: translateY(0) scale(1,1);
    }
    @media screen and (max-width: 1198px){
      .down-btn{
          width: 45%;
      }
    }
</style>
</head>
<body>

  <div>
    <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>蓝奏网盘</span></a>
    <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>天翼网盘</span></a>
    <a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>百度网盘</span></a>
<a href="#" class="down-btn tp-down-btn" data-sm-link-text="点击下载" target="_blank"><span>百变鹏仔</span></a>
  </div>

</body>
</html>

上面代码预览界面:


路过

雷人

握手

鲜花

鸡蛋

QQ|z记录博客|z记录网盘|Archiver|手机版|小黑屋|z记录

GMT+8, 2024-12-7 18:37 , Processed in 0.049957 second(s), 16 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

返回顶部