侧边栏

前端html文件下载，同源与异源下载

属性说明
download 下载的资源的名称
target 打开该连接的方式（ _self、_blank）
href 资源的地址（本地、远程地址）

a标签跳转

复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>这是一个a标签下载页面</title>
</head>
<body>
<a href="http://127.0.0.1/html/pg.jpg">下载</a>
</body>
</html>
复制代码

a标签下载

  • 需要在 href 属性中添加需要下载的文件的地址
  • download 属性用于设置下载的文件的名称

download不给值，会使用默认的文件名。

该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>这是一个a标签下载页面</title>
</head>
<body>
<a href="http://127.0.0.1/html/pg.jpg" download="123.jpg">下载</a>
</body>
</html>
复制代码

不同源地址下载

参考：https://www.jianshu.com/p/461b2b888a21

复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>这是一个a标签下载页面</title>
</head>
  <body>
    <button onclick="onDownload('https://img.zcool.cn/community/02of0fe3hmj6wgj5pdbe8h3237.png','cheng_boy.png')">下载（跨域）</button>

    <script type="text/javascript">
// filepath: 图片链接
// filename: 需要下载的图片名称
function onDownload(filepath, filename) {
      const x = new XMLHttpRequest()
      x.open('GET', filepath, true)
      x.responseType = 'blob'
      x.onload = function () {
        const blob = x.response
        const url = window.URL.createObjectURL(blob)
        // 判断是否是IE浏览器
        if (window.navigator.msSaveBlob) {
          try {
            window.navigator.msSaveBlob(blob, filename)
          } catch (e) {}
        } else {
          const a = document.createElement('a')
          a.href = url
          a.download = filename
          a.click()
        }
      }
      x.send()
    }
    </script>
  </body>
</html>
复制代码
posted @   菜鸟-传奇  阅读(311)  评论(0)  编辑  收藏  举报
相关博文：
· Sublime text 3 如何下载安装汉化插件，配置python2编译环境
· php伪协议的用法
· a标签下载文件并自定义文件名
· 前端实现文件下载(a标签文件下载）
· 盘点前端下载功能
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
点击右上角即可分享
微信分享提示