侧边栏

前端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 @ 2023-02-02 12:07  菜鸟-传奇  阅读(278)  评论(0)  编辑  收藏  举报