问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

web如何实现通过一个资源文件链接进行下载而不是浏览？

头像
code_sir
    54323974

    比如有一个pdf或者mp3的文件地址，http://ab.com/1243.pdf
    如何通过网页点击不是浏览，而是直接下载呢？

    javascript前端htmlhtml5jquery
    阅读 8.2k
    9 个回答
    得票最新
    头像
    code_sir
      54323974
      ✓ 已被采纳

      我的方案，拿走不谢，亲测有用

              async function downloadfile() {
            const { data } = await axios.get("http://dddd/99.pdf", {
                responseType: 'blob'
            });
            var blob = new Blob([data], { type: 'application/pdf' });
            const elink = document.createElement('a');
            elink.download = 'test';
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob)

            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink); 
        }
      头像
      雾岛听风
        12.1k51356

        你可以参考这个
        如何预览以及下载pdf文件

        //需要axios.js
 function dowanloadpdf() {
    axios({
      method: 'get',
      url:
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8e76dff9-ce38-4577-9e5c-398943705060/a5b050b8-3fa1-4436-b231-7b40725de731.pdf',
      responseType: 'blob',
    }).then(function (response) {
      const link = document.createElement('a')
      let blob = new Blob([response.data], { type: response.data.type })
      let url = URL.createObjectURL(blob)
      link.href = url
      link.download = '前端工程师必备技能.pdf'
      link.click()
    })
  }
        头像
        知名喷子
          6k31731

          楼上给的答案是标准做法，但 MDN 文档里有一句 “download属性对下载而言未必有效”。
          比如跨域的时候就无效，如果是跨域的话你可以搜一下“JS 下载跨域文件”，有些方案对于同源但是无法通过 a 标签下载的文件也是有效的。

          头像
          jsdeferred
            3.4k21317

            download有兼容性问题时的替代方案

            <!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="download">下载</button>
    <script>
      const download = (url) => {
        let link = document.createElement("a");
        link.style.display = "none";
        link.target = "_blank";
        link.href = url;
        const event = new MouseEvent("click");

        link.dispatchEvent(event);
      };

      document.getElementById("download").addEventListener("click", () => {
        download("https://github.com/AleeeKoi/js-file-downloader/archive/refs/tags/v1.1.19.zip");
      });
    </script>
  </body>
</html>
            头像
            SC_YZ
              131
              头像
              GU-Moon
                15814
                <a href="地址" download="地址">
                头像
                一颗小行星
                  5618

                  <a download="" href='***'>下载</a>
                  浏览器针对不同格式文件，a链接处理方式不同
                  文件不跨域 => 下载
                  文件跨域 + 浏览器不支持解析 => 下载
                  文件跨域 + 浏览器可以解析 => 新标签中打开

                  https://blog.csdn.net/w201013...

                  头像
                  嘻倪孢
                    34233666

                    请搜索 http header 下载， 授人以鱼不如授人以渔。
                    能做到全兼容

                    头像
                    farmerz
                      1.4k31423

                      stackOverflow上的例子

                      const a = document.createElement('a')
a.href = 'downloadUrl'
a.download='filename.ext'
document.body.appendChild(a)
a.click()
a.remove()
                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题